Wie erstelle ich mit SVG und CSS eine ansprechende Wellenform?

Mit SVG und CSS eine Wellenform erstellen

Frage: Wie kann ich mit CSS eine Wellenform erstellen, ähnlich dem bereitgestellten Bild? ?

Antwort:

Die gewünschte Wellenform kann durch eine Kombination von SVG und CSS erreicht werden. Hier ist ein umfassender Ansatz:

Erstellen Sie zunächst ein SVG-Element und definieren Sie den Pfad für die Welle. Dieser Pfad steuert die Kurven und Konturen der Form. Im folgenden Beispiel bildet der Pfad eine Welle von Punkt (0, 100) zu Punkt (500, 100):

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

Als nächstes erstellen Sie ein Containerelement zur Aufnahme der SVG. Dieser Container stellt sicher, dass die Wellenform reaktionsfähig bleibt.

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

Zuletzt formatieren Sie den Container mit CSS, um ihn reaktionsfähig zu machen, und positionieren Sie die SVG-Datei. Indem Sie den Polsterboden des Containers auf 100 % und die Position auf „relativ“ einstellen, können Sie das Seitenverhältnis des SVG beibehalten und gleichzeitig die verfügbare Höhe des Containers ausfüllen:

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

Dieser Ansatz stellt sicher, dass die SVG-Wellenform reagiert , behält seine gewünschte Form unabhängig von den Abmessungen des Behälters.

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