相关疑难解决方法(0)

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

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

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

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

我有两个具有不同渐变背景的div,我需要在它们之间创建一个S形曲线.

这是渐变div的示例小提琴:https://jsfiddle.net/JerryGoyal/rjyfc46c/2/

<div id="section1">

</div>
<div id="section2">

</div>
#section1{
  height:200px;
  background: linear-gradient(to bottom right, #ad3, #add);
}
#section2{
  height:200px;
  background: linear-gradient(to bottom right, #de350b, #0065ff);
}

我想到了几件事情,但是:

- svg:不知道如何处理其他渐变div.
- border-radius:无法获得真正类似S的曲线加上当我调整屏幕大小时它会变得难看.
- clip-path:某些浏览器不支持https://caniuse.com/css-clip-path
- png image: nope!需要是动态内容.

任何帮助,将不胜感激!

PS:未来读者必读:https://css-tricks.com/creating-non-rectangular-headers/

我正在尝试像这里的图像一样创建一个波浪形的顶部和底部边框

我尝试使用以下代码重新创建相同的效果

.wave{
  background: white;
  height: 25px;
  position: relative;  
}
.wave::before, .wave::after{
  border-bottom: 5px solid rgba(237, 30, 30, 1);
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background-size: 20px 40px;
  background-image:
    radial-gradient(circle at 10px -15px, transparent 20px, rgba(237, 30, 30, 1) 21px);
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background-size: 40px 40px;
  background-image:
    radial-gradient(circle at 10px 26px, rgba(237, 30, 30, 1) 20px, transparent 21px);
}


.wavebottom{
  background: …

请查看下面的图片，了解我要创建的内容：

到目前为止，我有以下内容，但它需要更加“频繁”，例如增加正弦或余弦波的频率。

#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>