css - css中的梯形轮廓

Question

<分区>

Answer 1

使用伪元素应该可以获得预期的效果。

这不是最好的，但它是让您继续前进的良好起点。

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;
}

<div>Some text</div>

---

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

<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>