So nutzt du: Schräge Section CSS
- Die Vorschau startet mit einer schrägen Unterkante. Wähle Beide für ein schräges Band oder Oben.
- Nutze Horizontal spiegeln, um die Neigungsrichtung zu ändern.
- Lege die Schnitttiefe in px (fester Winkel) oder vw (skaliert mit dem Bildschirm) fest.
- Kopiere das CSS.
Schräge Abschnitte ohne skew
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%) neigt die Unterkante eines Abschnitts, while der Text darin gerade bleibt – anders als transform: skewY(), das auch den Inhalt kippt. Zieh den nächsten Abschnitt mit einem negativen Margin unter den Winkel, damit sein Hintergrund die Lücke füllt.
Weitere Kantenformen – Rundungen, Pfeile, Wellen und Zickzacks – findest du im Section Divider Generator.
Auch gesucht als: diagonale section css, css schräger hintergrund, css abschnitt schräg, skewed section css, css diagonal trenner, schräger hero bereich.
Passende Tools zu: Schräge Section CSS
- Gewölbte Abschnittstrennung — Runde die Kante eines Heroes oder Abschnitts mit einer Kurve ab – konvex, nach innen gewölbt, als gebogener Winkel, sanfte Welle oder Bögen – und zwar nur mit CSS.
- Zackenrand CSS — Schneide eine Zickzack-, Sägezahn-, Wellen- oder Stufenkante in Sektionen, Karten, Gutscheine und Kassenbon-Designs.
- SVG Wellen Generator — Gestalte wellige Abschnitts-Trenner für Landingpages: Wellen hinzufügen oder entfernen (bis zu 6, jeweils mit eigener Farbe, Deckkraft und Form), Anzahl der Kämme, Höhe und Glättung festlegen, Farben wählen und bestimmen, ob die Welle oben oder unten sitzt.
- 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.
Häufige Fragen
Wie winkle ich Ober- und Unterkante eines Abschnitts gleichzeitig an?
Wähle die Kante Beide: Das Polygon schneidet Ober- und Unterkante parallel und ergibt ein schräges Band – clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%).
Soll ich skewY oder clip-path verwenden?
clip-path. skewY kippt auch Text und Bilder im Abschnitt, daher bräuchtest du ein zweites, entgegengesetztes Skew für den Inhalt. clip-path schneidet nur die Kante zu.
Wie behalte ich den Winkel auf dem Handy bei?
Nutze eine Schnitttiefe in vw: Der Schnitt skaliert mit der Bildschirmbreite, sodass der Winkel bei jeder Breite gleich bleibt.
Kann ich Schräge Section CSS als Web-App installieren und offline nutzen?
Ja. Schräge Section CSS ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.