Comment utiliser : 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.
Aussi recherché comme : curved section css, css curved bottom, curved hero section css, css curve divider, rounded section bottom css, css arc section.
Outils complémentaires : 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.
Questions fréquentes
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.
Puis-je installer Curved Section Divider en tant qu’application web et l’utiliser hors ligne ?
Oui. Curved Section Divider est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.