Erstellen einer Wellenform mit Grenze in CSS3

Wenn Sie versuchen, eine Wellenform mit CSS3 mit Formen zu entwerfen, kann das gewünschte Ergebnis möglicherweise nicht erreichbar ist Um dies zu überwinden, sollten Sie SVG anstelle eines DIV für die Wellenform verwenden.

Implementierung:

Beginnen Sie mit dem Erstellen eines Container -DIV mit einem unteren Rand. Platzieren Sie im Behälter den Inhalt und den SVG für die Wellenform. Schweben Sie das SVG nach rechts.

SVG -Design:

die Wellenform verwenden, um die Form zu definieren und sie mit Weiß zu füllen. Erstellen Sie als nächstes einen weiteren Weg, leicht versetzt, um den Rand unter Verwendung der Stroke -Eigenschaft zu definieren und die Füllung auf transparent zu setzen. Passen Sie die Dimensionen und die Position des SVG nach Bedarf an, um dem gewünschten Design zu entsprechen. Hintergrund: #007FC1; } .Container { Grenzboden: 4px fest #b4cad8; } .Container { Hintergrundfarbe: #fff; } .Container> .text { Polsterung: 0,5EM; } .Panel { Position: Relativ; float: rechts; Rand: -4px; }