So nutzt du: Curved Section Divider
- The preview starts with a convex curve on the bottom edge; choose Scoop for the inverse.
- Try Curved angle, Wave or Scallops and set the number of repeats.
- Set the curve depth, and the edge (bottom, top or both).
- Copy the CSS.
Curves with clip-path
The curve is a polygon() with dozens of points that follow the arc, each set with calc(100% - …) so its depth stays fixed in px or vw. For a simple elliptical bottom you can also use border-radius: 0 0 50% 50% / 0 0 80px 80px, but that bends the corners of the content box too; the clip-path version cuts only the edge.
For layered waves see the SVG Wave Generator; for angles and zigzags, the Section Divider Generator.
Auch gesucht als: curved section css, css curved bottom, curved hero section css, css curve divider, rounded section bottom css, css arc section.
Passende Tools zu: Curved Section Divider
- Angled Section CSS — Build angled, slanted or diagonal sections — the classic landing-page look — with one clip-path rule.
- Zigzag Border CSS — Cut a zigzag, sawtooth, scalloped or stepped edge into sections, cards, coupons and receipt designs.
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
Häufige Fragen
How do I make a curved bottom on a section?
Choose Curve and copy the CSS: a clip-path polygon traces a curve along the bottom edge. Alternatively border-radius: 0 0 50% 50% / 0 0 80px 80px gives a simple elliptical bottom.
Can the curve go inwards?
Yes — Scoop curves the edge inward, so the next section bulges up into this one.
Is a polygon curve smooth enough?
Yes. The curve uses dozens of points; at normal sizes it looks the same as an SVG curve.
Kann ich Curved Section Divider als Web-App installieren und offline nutzen?
Ja. Curved Section Divider 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.