How can I create a wavy shape CSS?
Please see the image below for what I am trying to create:
I have the following so far but it needs to be more ''frequent'' like increasing the frequency rate of a sin or cosine wave.
#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>Solution 1:
Here is an idea with radial-gradient and CSS variables where you can easily control the shape:
.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>
Here is a Codepen to play with the code