So nutzt du: Gewölbte Abschnittstrennung
- Die Vorschau startet mit einer konvexen Kurve an der Unterkante; wähle Scoop für die umgekehrte Form.
- Probiere Curved angle, Wave oder Scallops aus und lege die Anzahl der Wiederholungen fest.
- Stelle die Tiefe der Kurve ein und wähle die Kante (unten, oben oder beide).
- Kopiere das CSS.
Kurven mit clip-path
Die Kurve ist ein polygon() mit Dutzenden Punkten, die dem Bogen folgen. Jeder Punkt wird mit calc(100% - …) gesetzt, damit die Tiefe in px oder vw fest bleibt. Für eine einfache elliptische Unterkante kannst du auch border-radius: 0 0 50% 50% / 0 0 80px 80px verwenden, das biegt aber auch die Ecken des Content-Bereichs; die clip-path-Variante schneidet nur die Kante aus.
Für mehrlagige Wellen schau dir den SVG Wave Generator an; für Winkel und Zickzack-Muster den Section Divider Generator.
Auch gesucht als: curved section css, gewölbte section css, css curved bottom, curved hero section css, css kurve abschnitt, abgerundete section unten css, css bogen section.
Passende Tools zu: Gewölbte Abschnittstrennung
- Schräge Section CSS — Baue schräge, angewinkelte oder diagonale Abschnitte – der klassische Landingpage-Look – mit einer einzigen clip-path-Regel.
- Zackenrand CSS — Schneide eine Zickzack-, Sägezahn-, Wellen- oder Stufenkante in Sektionen, Karten, Gutscheine und Kassenbon-Designs.
- Border-Radius Generator — Runde die Ecken beliebiger Boxen ab: Zieh einen Regler für alle Ecken oder stell jede Ecke einzeln ein, wechsle zu elliptischen Ecken für Blob- und Blattformen und kopiere das kürzeste gültige border-radius-CSS.
- 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 mache ich eine gewölbte Unterkante bei einem Abschnitt?
Wähle Curve und kopiere das CSS: Ein clip-path-Polygon zeichnet eine Kurve entlang der Unterkante. Alternativ ergibt border-radius: 0 0 50% 50% / 0 0 80px 80px eine einfache elliptische Unterkante.
Kann die Kurve nach innen verlaufen?
Ja – Scoop wölbt die Kante nach innen, sodass der nächste Abschnitt in diesen hineinragt.
Ist eine Polygon-Kurve glatt genug?
Ja. Die Kurve besteht aus Dutzenden Punkten; bei normalen Größen sieht sie genauso aus wie eine SVG-Kurve.
Kann ich Gewölbte Abschnittstrennung als Web-App installieren und offline nutzen?
Ja. Gewölbte Abschnittstrennung 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.