Ich versuche mit CSS weiche Wellen zu erzeugen und habe Probleme. Ich benutze jetzt border-radius, um Wellen zu erzeugen, aber es sieht eher wie Wolken aus. Ich habe versucht, transform: translateZ(180deg);
, aber die div
Farbe ist dann auf den Kopf gestellt.
Ich würde vorschlagen, ein inline handcodiertes SVG zu verwenden. Deine Formen sind ziemlich einfach und ein macht die Wellen mit dem Element SVG <path>
einfach
Alles, was Sie über den Pfad SVG auf MDN wissen müssen . Im folgenden Beispiel habe ich zwei Pfadelemente mit quadratischen Bezier-Kurven verwendet um die Wellen zu machen:
Tags und Links css svg css3 css-shapes