如何使用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>