css

Question

如何在css中绘制下图。

有很多链接可以绘制填充形状，但是找到任何可以绘制轮廓的链接。

Answer 1

使用伪元素可以获得所需的效果。

这不是最好的，但这是一个很好的起点让你顺利上路。

＆＃13;

＆＃13;

div {
  margin-left: 20px;
  border-top: 2px solid darkred;
  border-right: 2px solid darkred;
  height: 30px;
  display: inline-block;
  background: white;
  width: auto;
  padding: 0 10px 0 0;
  line-height: 30px;
  position: relative;
}
div:before {
  position: absolute;
  top: 5px;
  left: -11px;
  content: '';
  width: 35px;
  height: 35px;
  transform: rotate(30deg);
  background: transparent;
  border-left: 2px solid darkred;
}

＆＃13;

<div>Some text</div>

＆＃13;

＆＃13;

＆＃13;

另一种方法是使用SVG，它非常简单，并使用坐标来制作所需的形状。

＆＃13;

＆＃13;

<svg width="100px" height="30px" viewbox="0 0 100 30" preserveAspectRatio="none">
  <path d="M5,25 L20,5 L95,5 L95,25" stroke="darkred" stroke-width="5" fill="white" />
</svg>

＆＃13;

＆＃13;

＆＃13;