与css的波浪形状

Question

我正在尝试使用CSS重新创建此图像:

我不需要重复.这就是我的开始,但它只是一条直线:

#wave {
  position: absolute;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}

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

Answer 1

我不确定这是你的形状,但它很接近 - 你可以玩价值观:

https://jsfiddle.net/7fjSc/9/

#wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}
#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: #e0efe3;
  left: 0;
  top: 27px;
}

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

Answer 2

我认为这是制作你想要的形状的正确方法.通过使用SVG的可能性和容器来保持形状的响应.

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path>
  </svg>
</div>

Answer 3

我的实现使用了html中的svg元素,我还制作了一个生成器来制作你想要的wave:

https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections

<div style="height: 150px; overflow: hidden;">
  <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
    <path d="M0.00,92.27 C216.83,192.92 304.30,8.39 500.00,109.03 L500.00,0.00 L0.00,0.00 Z" style="stroke: none;fill: #e1efe3;"></path>
  </svg>
</div>

https://jsfiddle.net/1b8L7nax/5/

Answer 4

最近推出了一个名为 Get Waves 的很​​棒的工具，您可以简单地从 UI 创建自己的 wave，然后将其导出为 SVG 格式。这就像访问https://getwaves.io/网站并享受它一样简单！

编辑：

最近我还发现了一个新工具 - https://shapedivider.app/

编辑2：

还有一个，这个看起来很先进，指出何时打破曲线https://www.svgwaves.io

Answer 5

我的纯CSS实现基于上面的100%宽度.希望能帮助到你!

#wave-container {
  width: 100%;
  height: 100px;
  overflow: hidden;
}

#wave {
  display: block;
  position: relative;
  height: 40px;
  background: black;
}

#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100%;
  width: 100%;
  height: 300px;
  background-color: white;
  right: -25%;
  top: 20px
}

#wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100%;
  width: 100%;
  height: 300px;
  background-color: black;
  left: -25%;
  top: -240px;
}

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

Answer 6

我喜欢ThomasA的答案，但想要一个更现实的上下文，并使用wave将两个div分开。因此，我创建了一个更完整的演示，其中分隔符SVG完美地位于两个div之间。

现在，我认为进一步推广会很不错。如果我们可以在CSS中完成所有这些而又不需要内联SVG怎么办？关键是要避免额外的标记。这是我的操作方式：

两个简单<div>：

/** CSS using pseudo-elements: **/

#A {
  background: #0074D9;
}

#B {
  background: #7FDBFF;
}

#A::after {
  content: "";
  position: relative;
  left: -3rem;
  /* padding * -1 */
  top: calc( 3rem - 4rem / 2);
  /* padding - height/2 */
  float: left;
  display: block;
  height: 4rem;
  width: 100vw;
  background: hsla(0, 0%, 100%, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 70 500 60' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='500' height='500' style='stroke: none; fill: %237FDBFF;' /%3E%3Cpath d='M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z' style='stroke: none; fill: %230074D9;'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 100%;
}


/** Cosmetics **/

* {
  margin: 0;
}

#A,
#B {
  padding: 3rem;
}

div {
  font-family: monospace;
  font-size: 1.2rem;
  line-height: 1.2;
}

#A {
  color: white;
}

<div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec quam tincidunt, iaculis mi non, hendrerit felis. Nulla pretium lectus et arcu tempus, quis luctus ex imperdiet. In facilisis nulla suscipit ornare finibus. …
</div>

<div id="B" class="wavy">… In iaculis fermentum lacus vel porttitor. Vestibulum congue elementum neque eget feugiat. Donec suscipit diam ligula, aliquam consequat tellus sagittis porttitor. Sed sodales leo nisl, ut consequat est ornare eleifend. Cras et semper mi, in porta nunc.</div>

演示波浪分隔线（带有CSS伪元素，以避免额外的标记）

与使用嵌入式SVG相比，定位起来有些棘手，但效果也不错。（可以使用CSS自定义属性或预处理程序变量来使高度和填充易于阅读。）

要编辑颜色，您需要编辑URL编码的SVG本身。

请注意（如第一个演示中一样），注意更改viewBox以摆脱SVG中不需要的空间。（另一种选择是绘制不同的SVG。）

这里要注意的另一件事是使它在两个方向上都伸展的background-size设置100% 100%。