I'm trying to create rounded waves using CSS , and I have problems.
Now I use border-radius to create waves, but it looks more like clouds.
I tried to use transform: translateZ(180deg); but the color of the div turned over.

Here is what I want to get:

enter image description here

And here, what happened with me:

enter image description here

 .wave1 { left: 0%; margin-left: -50px; } .wave2 { margin-left: -69px; } .wave3 { margin-left: -69px; } .wave4 { margin-left: -69px; } .waves { width: 200%; clear: none; z-index: 100; position: absolute; margin-top: 200px; margin-left: -150px; } .waves div { float: left; width: 500px; height: 100px; border: solid 5px #000; border-color: transparent; border-radius: 70%/100px 100px 0 0; background-color: #fff; } .bottom-half { width: 100%; height: 50%; top: 70%; position: absolute; background-color: #fff; } .background-waves { width: 200%; clear: none; z-index: 50; position: absolute; margin-top: 190px; margin-left: 75px; } .bwave1 { left: 0%; margin-left: -50px; } .bwave2 { margin-left: -69px; } .bwave3 { margin-left: -69px; } .bwave4 { margin-left: -69px; } .background-waves div { float: left; width: 500px; height: 100px; border: solid 5px #000; border-color: transparent; border-radius: 70%/100px 100px 0 0; background-color: #fff; opacity: 0.5; } 
 <div class="waves"> <div class="wave1"></div> <div class="wave2"></div> <div class="wave3"></div> <div class="wave4"></div> <div class="wave5"></div> </div> <div class="background-waves"> <div class="bwave1"></div> <div class="bwave2"></div> <div class="bwave3"></div> <div class="bwave4"></div> <div class="bwave5"></div> </div>

1 answer 1

I would suggest using the built-in manual SVG code.

Your shapes are pretty simple, so the waves with the SVG <path> element are also easy to make.

Everything you need to know about the SVG path is on MDN .

In the following example, I used two path elements with quadratic Bezier curves to make waves:

 svg{ background:url('https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg') no-repeat center center; background-size:cover; width:100%; display:block; } 
 <svg viewbox="0 0 100 25"> <path fill="#9EAFFD" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" /> <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" /> </svg>

Source: Waves in CSS or SVG @ web-tiki

  • Sasha, you took the coordinates from the editor? - user33274 4:04 pm
  • @MaksimLensky Of course, if you have simple polygons, you can manually sort through the cells, but if these are complex curves, then you can either from the Bezier curve generator svg-art.ru/?p=1114 or in a vector editor - Alexandr_TT