Wie erstelle ich mit CSS3 und SVG eine Wellenform mit Rand?

Wellenform mit Rand mit CSS3 und SVG

Die Implementierung einer Wellenform mit CSS3 kann eine Herausforderung sein. Während CSS3-Formen eine große Auswahl an Möglichkeiten bieten, sind sie unzureichend, wenn es darum geht, Ränder anzuwenden und Hintergrundfarben auf unregelmäßigen Formen festzulegen.

Um den gewünschten „Wellenform mit Rand“-Effekt zu erzielen, können wir die Leistungsfähigkeit von nutzen SVG (Skalierbare Vektorgrafiken). SVGs bieten Flexibilität bei der Definition komplexer Formen und können einfach mit CSS gestaltet werden.

<svg class="panel" width="200" height="54">
  <path d="M0,0 h7 q9,3 12.5,10 l13,30 q3.2,10 13,10 h157 v-50z" fill="white" />
  <path transform="translate(0, -0.5)" d="M0,2 h7 q10,2 13,10 l13,30 q3,9 13,10 h157" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="110.5" y="25" text-anchor="middle">This is a panel</text>
</svg>

Wenn Sie das SVG-Element neben dem Hauptinhalt platzieren und es rechts ausrichten, entsteht die Illusion einer Wellenform mit Rand:

.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

Indem wir den Z-Index des Container-Div auf -1 setzen, stellen wir sicher, dass das SVG-Element über dem Inhalt bleibt und das Gewünschte erstellt Effekt.

Durch die Kombination der Flexibilität von SVGs mit den Styling-Funktionen von CSS können wir den Effekt „Wellenform mit Rand“ in CSS3 erzielen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS3 und SVG eine Wellenform mit Rand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!