html - 如何使用css获得这个？

Question

如何使用 css 绘制它？我尝试使用边框 css 并旋转 DIV，但没有找到确切的答案。

Answer 1

你需要使用clippath

这是示例链接 Codepen

html:

<div class="tag-blue" style="-webkit-clip-path: url(#clip1);clip-path: url(#clip1);">gadgets 3</div>

<svg width="0" height="0">
    <defs>
        <clipPath id="clip1" clipPathUnits="objectBoundingBox">
            <polygon points="0 0, 1 0, .82 1, 0 1">
            </polygon>
        </clipPath>
    </defs>
</svg>

CSS:

.tag-blue{
  background-color: red;
  height: 300px;
  width: 300px;
}

根据需要更改路径