创建 CSS 波形 [关闭]答案

【问题标题】：Creating CSS wave shape [closed]创建 CSS 波形 [关闭]
【发布时间】：2021-05-17 21:06:36
【问题描述】：

我想使用 CSS 归档这种形状。

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

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

【问题讨论】：

请提供一些更具代表性的html和css。通过证明合理的尝试，让我们尽可能轻松地为您提供帮助
请@JonP 添加图片
我想要的是我的页面有两个波浪像图片中的那样填满整个页面，我可以填充但形状是我的问题
到目前为止你有什么尝试？
代码@AHaworth

标签： css css-shapes

【解决方案1】：

您可以使用border-radius、relative positioning 一点点CSS gradient 和一些z-index 来实现它。

HTML

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

CSS

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;
}

DEMO

【讨论】：

我希望它适合屏幕，所以我添加了一些 java 脚本来控制响应，它起作用了。谢谢。
太棒了！您可以只使用width:100%; 使其适合所有 div。