如何使用 css 创建箭头形状标题？ [复制]

Question

我正在尝试创建一个弯曲的标题

使用 css，但不知道如何正确处理。 如果你以前见过这个，你能指出我正确的方向吗？我在玩 SVG 效果，但也许有更好的方法来做到这一点。

Answer 1

您可以使用css clip-path 来获得这样的形状。

.parent {
  width: 100%;
  height: 200px;
  background: red;
}

.child {
  clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
  background: #000;
  width: 100%;
  height: 100%;
}

<div class="parent">
  <div class="child"></div>
</div>