如何使div的底部呈峰形？

Question

我正在尝试使我的div具有以下形式：

我只能通过正在使用的代码获得此结果：

div {
  background: lightblue;
  height: 34rem;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
}

<div></div>

感谢您的帮助！

Answer 1

div {
  background: lightblue;
  height: 34rem;
  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}

<div></div>

此链接很有帮助https://bennettfeely.com/clippy/

Answer 2

如果仅是着色，则不需要使用clip-path。您可以通过多种背景轻松实现此目标并获得更好的支持：

div.box {
  height: 300px;
  background:
    linear-gradient(blue,blue) top/100% 70%,
    linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,
    linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;
  background-repeat:no-repeat;
  margin-bottom:20px;
}

<div class="box">
</div>

如果需要黑色边框，可以如下调整：

div.box {
  height: 300px;
  background:
    linear-gradient(blue,blue) top/100% 70%,
    linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,
    linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left  -20px/calc(50% + 21px) 30%;
  background-repeat:no-repeat;
  margin-bottom:20px;
}

<div class="box">
</div>