Warum sehe ich eine dünne Linie zwischen Welle und Sektion?

Meist ein Subpixel-Spalt durch Rundung. Lass die unterste Schicht 1 bis 2 Pixel in die nächste Sektion hineinragen, etwa mit margin-bottom: -1px auf dem SVG, oder gib dem SVG die Hintergrundfarbe der folgenden Sektion.

Inline-SVG oder img-Tag?

Inline, wenn du Farben per CSS-Variable steuern oder die Welle animieren willst. img oder background-image, wenn die Welle statisch ist und das HTML schlank bleiben soll.

Wie hoch soll die Welle sein?

Als Trenner zwischen 6 und 14 Prozent der Viewportbreite, also height: 10vw als Ausgangspunkt, mit einem Deckel per max-height. Zu hohe Wellen fressen auf Mobilgeräten den Inhalt.

SVG-Wellen als Section-Divider: sauber einbauen, ohne Kanten und Sprünge

Ein Wellen-Trenner ist die einfachste Art, zwei Sektionen mit unterschiedlichen Hintergründen zu verbinden, ohne dass die Seite wie ein Stapel Kästen wirkt. Die Technik ist simpel, die Details entscheiden, ob es sauber aussieht.

Der Kern: eine Welle, zwei Farben

Die Welle sitzt zwischen zwei Sektionen. Ihre Fläche muss exakt die Farbe der Sektion tragen, in die sie übergeht. Bei mehreren Schichten gilt das nur für die vorderste, unterste Schicht; die anderen dürfen frei gewählt sein.

<section class="hero">…</section>
<svg class="trenner" viewBox="0 0 1440 320" preserveAspectRatio="none" aria-hidden="true">
  <path d="…" fill="#2f4f7d"/>
  <path d="…" fill="#1f365d"/>
  <path d="…" fill="#fdfaf3"/> <!-- Farbe der naechsten Sektion -->
</svg>
<section class="inhalt">…</section>

.trenner { display: block; width: 100%; height: 10vw; max-height: 220px; margin-bottom: -1px; }

Drei Dinge sind hier wichtig. display: block verhindert den Zeilenabstand, den ein Inline-SVG sonst unter sich lässt. preserveAspectRatio="none" erlaubt, dass die Welle mit der Breite gestreckt wird, ohne dass sich die Höhe ändert. Und margin-bottom: -1px schließt den Subpixel-Spalt, der bei manchen Zoomstufen als helle Linie sichtbar wird.

Weg zwei: als Hintergrund

Wenn die Welle nicht zwischen Sektionen, sondern unter Inhalt liegen soll, ist der CSS-Export der richtige. Das SVG wird als Data-URI in background-image gelegt, ein zusätzlicher Request entfällt.

.hero {
  background-image: url("data:image/svg+xml,%3Csvg …%3E");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
}

Mit background-position: bottom center bleibt die Welle unten, auch wenn die Sektion höher wird als das Bild. Für Wellen, die oben sitzen sollen, wähle im Generator die Richtung „Welle oben” und positioniere mit top center.

Farben an das Design binden

Bei Inline-SVG kannst du die Füllungen durch CSS-Variablen ersetzen und die Welle so an ein Theme koppeln:

<path d="…" fill="var(--sektion-hintergrund)"/>

Das funktioniert nur inline, nicht in img oder background-image, weil externe SVGs keinen Zugriff auf die Variablen der Seite haben.

Mobil

Auf schmalen Viewports sind 1440 Pixel breite Wellen mit vielen Teilwellen zu unruhig. Zwei Wege: entweder eine zweite, einfachere Welle mit Komplexität 1 und picture-Element für Breiten unter 640 Pixel, oder die Höhe stärker begrenzen, etwa height: 14vw mit max-height: 120px. Beide sind in einer Minute mit dem Generator erledigt, weil der Link in der Adresszeile alle Werte trägt.

Kurz gesagt: Inline mit block, gestreckt per preserveAspectRatio none, unterste Schicht in der Farbe der nächsten Sektion, einen Pixel überlappen.

Der Kern: eine Welle, zwei Farben

Weg zwei: als Hintergrund

Farben an das Design binden

Mobil

Häufige Fragen