css - 向下箭头 CSS3

Question

我正在尝试使用 CSS3 创建这样的对象:

基本上这是一个向下的箭头(蓝色部分)。尝试了多种服务，例如 http://www.cssarrowplease.com/但它们不能生产出所需要的东西。

有什么线索可以制作这样的箭头吗？

.arrow_box {
  position: relative;
  background: #88b7d5;
}

.arrow_box:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #88b7d5;
  border-width: 30px;
  margin-left: -30px;
}

<div class="arrow_box"></div>

Answer 1

像这样使用多个背景和渐变:

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(blue,blue) top/100% 50px,
    linear-gradient(to bottom left,blue 49%,transparent 50%) 0 50px/50.1% 100px,
    linear-gradient(to bottom right,blue 49%,transparent 50%) 100% 50px/50.1% 100px,
    #000;
  background-repeat:no-repeat;
}

您还可以依靠边框使背景不那么复杂:

.box {
  height:100vh;
  border-top:50px solid blue;
  background:
    linear-gradient(to bottom left,blue 49%,transparent 50%) top left,
    linear-gradient(to bottom right,blue 49%,transparent 50%) top right,
    #000;
  background-size:50.1% 40%;
  background-repeat:no-repeat;
  box-sizing:border-box;
}

body {
  margin:0;
}

<div class="box">

</div>