I'm trying to realize a wave-shaped header for a website... It should look like that (no comment on the gradient, not my choice lol)
I tested some part of codes I found online to make this effect with CSS but when I try to edit something to make the wave adaptive to different kind of devices, everything goes down... With percentage it's quite difficult to me to find the exact point where the first curved shaped has to end and the next has to begin, I am left with some no needed straight line...
I even tried to use a SVG file to solve the issue but... you can imagine...
Anyone can help me to realize this? Thanks in advance!
Here's my code:
#wave {
position: relative;
height: 100px;
width: 100%;
background: purple;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 40%;
width: 65%;
height: 100px;
background-color: white;
right: -50px;
top: 85px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 40%;
width: 65%;
height: 120px;
background-color: purple;
left: -10%;
top: 57px;
} <header id="wave">
...
</header>
