创建没有图像的弯曲div

Question

我想复制图像效果。在https://inventi.studio/en页上，您可以看到一些带有“ waves”的div容器。通过上传图片作为背景来实现弯曲效果。

这就是我目前拥有的

#box {
  height: 200px;
  background-image: linear-gradient(135deg, #47b784, #009d90 26%, #00818e 50%, #25647b 74%, #36495d);
}

<div id="box">
</div>

<div id="page">
  Content starts here
</div>

这就是我试图实现的目标

#wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #47b784;
}

#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 340px;
  height: 80px;
  background-color: white;
  right: -5px;
  top: 40px;
}

#wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 300px;
  height: 70px;
  background-color: #47b784;
  left: 0;
  top: 27px;
}

<div id="wave">
</div>

<div id="page">
  content starts here
</div>

但是您可以看到弯曲的div下面的div被覆盖了。我正在尝试使用一个不与其他容器重叠的div容器来达到这种效果。

如何使用一个div容器且没有图像作为背景来实现此目的？

Answer 1

您是否可以仅在页面顶部添加等于波浪before顶部的填充？

#wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #47b784;
}

#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 340px;
  height: 80px;
  background-color: white;
  right: 0;
  top: 39px;
}

#wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 300px;
  height: 70px;
  background-color: #47b784;
  left: 0;
  top: 27px;
}

#page {
  padding-top: 40px;
}

<div id="wave">
</div>

<div id="page">
  content starts here
</div>