请参阅下图了解我正在尝试创建的内容：
到目前为止，我有以下内容，但它需要更加“频繁”，例如增加正弦波或余弦波的频率。
#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>
我有一个在线生成器，可以生成以下代码：https://css-generators.com/wavy-shapes/ https://css-generators.com/wavy-shapes/
这是一个想法radial-gradient和 CSS 变量，您可以轻松控制形状：
.wave {
--c:red; /* Color */
--t:5px; /* Thickness */
--h:50px; /* Height (vertical distance between two curve) */
--w:120px; /* Width */
--p:13px; /* adjust this to correct the position when changing the other values*/
background:
radial-gradient(farthest-side at 50% calc(100% + var(--p)), #0000 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
radial-gradient(farthest-side at 50% calc(0% - var(--p)), #0000 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t)));
background-size: var(--w) var(--h);
background-position: calc(var(--w)/2) calc(var(--h)/2),0px calc(var(--h)/2);
border:1px solid;
margin:5px 0;
display:inline-block;
width:300px;
height:150px;
}
<div class="wave"></div>
<div class="wave" style="--w:200px;--h:40px;--p:10px; --t:8px;--c:purple"></div>
<div class="wave" style="--w:80px ;--h:20px;--p:5px; --t:3px;--c:blue;"></div>
<div class="wave" style="--w:100px;--h:30px;--p:14px;--t:10px;--c:green;"></div>
这里有一个Codepen https://codepen.io/t_afif/pen/VwwJzbp玩代码
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
