创建CSS波形

我想用CSS归档这种形状

#wave {
  position: absolute;
  height: 50%;
  width: inherit;
  background: #e0efe3;
}

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

您可以使用边界半径、相对定位、一点CSS渐变和一些z索引来实现它

HTML

---

请提供一些更具代表性的html和css。我添加了一张图片@JonP Please我想要的是我的页面有两个像图片中那样的波浪填充整个页面，我可以填充，但形状是我的问题。到目前为止，你做了什么？代码上有什么@ahaworth我想要它适合屏幕，所以我添加了一些java脚本来控制响应性，它起作用了。谢谢，太棒了！，只需使用宽度：100%；对于所有的div。

<div class="topdiv">Top Content</div>
<div class="overlapdiv"></div>
<div class="bottomdiv">Bottom Content</div>

div {
  width: 500px;
  min-height: 200px;
  position: relative;
}
.topdiv {
  background-color: #911bc9;
  border-radius: 0 0 0 100px;
  z-index: 2;
}
.overlapdiv {
  top: -100px;
  background: linear-gradient(90deg,rgba(168, 57, 224, 1) 0%,rgba(168, 57, 224, 1) 50%,rgba(145, 27, 201, 1) 50%,rgba(145, 27, 201, 1) 100%);
}
.bottomdiv {
  background-color: #a839e0;
  z-index: 1;
  border-radius: 0 100px 0 0;
  top: -200px;
}