创建 CSS 波形

Question

Sample image

我想使用 CSS 来存档这种形状。

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

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

Answer 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

创建 CSS 波形

Creating CSS wave shape

css

css-shapes