So nutzt du: Section Divider Generator
- Wähle eine Form: Winkel, Pfeil, Kerbe, Kurve, Mulde, gebogener Winkel, Welle, Zickzack, Zacken oder Stufen.
- Wähle die Kante für den Schnitt: unten, oben oder beide. Beide Kanten mit einem Winkel ergeben das klassische schräge Band.
- Lege die Schnitttiefe fest. Nutze px oder vw, damit der Winkel gleich bleibt, wenn der Abschnitt wächst. Bei Wellen und Zickzacks stellst du zusätzlich die Anzahl der Wiederholungen ein.
- Kopiere das CSS in deinen Abschnitt. Die optionale Regel zieht den nächsten Abschnitt unter den Schnitt hoch, damit keine Lücke entsteht.
So funktionieren schräge Abschnitte
Der Abschnitt behält seine normale rechteckige Box. clip-path: polygon() blendet lediglich ein Dreieck (oder eine Kurve, ein Zickzack) entlang seiner Kante aus. Jeder Punkt auf der Schnittkante nutzt calc(100% - 80px). Der Schnitt ist also immer 80 px tief, egal ob auf einem kurzen Hero-Bereich oder einem langen Abschnitt, und der Winkel ändert sich nicht, wenn mehr Inhalt dazukommt.
.section {
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
padding-bottom: calc(80px + 3rem);
}
.section + * { margin-top: -80px; padding-top: calc(80px + 3rem); }Die zweite Regel schiebt den nächsten Abschnitt unter den Schnitt. Dadurch füllt dessen Hintergrund die schräge Lücke und nicht der Hintergrund der Seite. z-index: 1 sorgt dafür, dass der beschnittene Abschnitt oben liegt. Kurven, Wellen und Zacken werden als Polygone mit vielen Punkten gezeichnet, die jeder moderne Browser sauber darstellt.
clip-path vs. skew vs. SVG
transform: skewY() kippt den Abschnitt ebenfalls, verzerrt aber auch den Inhalt. Dann müsstest du jedes Kind-Element wieder entzerren. Ein SVG-Trenner braucht ein zusätzliches Element. clip-path schneidet den Abschnitt selbst zu, inklusive Hintergründen, Verläufen und Fotos, und das mit einer einzigen Regel. Für mehrlagige, organische Wellen nutzt du den SVG Wave Generator. Wenn du eine Kante weich auslaufen lassen statt abzuschneiden willst, hilft der CSS Mask Generator.
Auch gesucht als: schräger abschnitt css, css abgeschrägte section, diagonale section css, css shape divider, gebogene section css, zickzack rand css, clip-path section divider, css abschnitt trenner.
Passende Tools zu: Section Divider Generator
- CSS Clip-path Generator — Schneide Bilder und Elemente in beliebige Formen: Wähle eine von 15 Startformen — Dreieck, Sechseck, Stern, Pfeil, Chevron, Sprechblase, Kreis, Ellipse, abgerundetes Inset … — und ziehe die Punkte über ein Beispielbild oder dein eigenes.
- CSS Verlauf Generator — Gestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.
- SVG Blob Generator — Erstelle glatte, organische Blob-Formen für Hero-Hintergründe, Avatare und Illustrationen.
- CSS Dreieck Generator — Erstelle ein reines CSS-Dreieck für einen Tooltip-Pfeil, ein Dropdown-Caret oder eine Sprechblase: Wähle eine von 8 Richtungen, Breite, Höhe und Farbe und kopiere entweder den klassischen Border-Trick oder die einfachere clip-path-Variante.