html - ¿Cómo puedo crear un CSS de forma ondulada?

css-shapes

Question

Por favor, vea la imagen de abajo para lo que estoy tratando de crear:

Tengo lo siguiente hasta ahora, pero debe ser más "frecuente", como aumentar la frecuencia de una onda de pecado o coseno.

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

Aquí hay una idea con variables de radial-gradient y CSS donde puedes controlar fácilmente la forma:

.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)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
radial-gradient(farthest-side at 50% calc(0% - var(--p)), transparent 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>