Wie kann ich eine Wellenform nur mit CSS und SVG erstellen?

Wellenform mit CSS

Das Erstellen einer Wellenform mit CSS kann durch eine Kombination aus CSS3-Eigenschaften und SVG erreicht werden. Hier ist eine Aufschlüsselung, wie es geht:

1. Erstellen Sie einen Container

Schließen Sie das SVG-Element in ein Container-Div ein, um die Größe der Form zu steuern und ihr Seitenverhältnis beizubehalten. Fügen Sie das folgende CSS hinzu:

.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

2. Fügen Sie das SVG-Element hinzu

Fügen Sie im Container ein SVG-Element mit einer viewBox und der Eigenschaft „preserveAspectRatio“ ein, um die Abmessungen der Form festzulegen und ihre Form beizubehalten.

<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
  <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z">

Die Pfaddefinition verwendet kubische Bezierkurven, um die Wellenform zu erzeugen. Die Strich- und Fülleigenschaften steuern den Umriss bzw. die Farbe der Form.

3. Positionieren Sie das SVG

Stellen Sie das SVG-Element so ein, dass es absolut innerhalb des Containers positioniert wird.

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

Durch Anpassen der Abmessungen und Werte des Containers und der SVG-Elemente können Sie das anpassen Größe und Form des Wellenelements nach Wunsch.

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