创建没有图像的弯曲div [重复]答案

【问题标题】：create curved div without image [duplicate]创建没有图像的弯曲div [重复]
【发布时间】：2018-09-27 13:04:42
【问题描述】：

我想复制图像效果。在此页面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 容器且没有图像作为背景来实现这一点？

【问题讨论】：

只需将 margin-bottom 添加到#wave ?
相关：stackoverflow.com/questions/49669689/…

标签： html css

【解决方案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>

【讨论】：