Comment utiliser : Séparateur de section courbe
- L'aperçu commence avec une courbe convexe sur le bord inférieur ; choisissez Creux pour l'inverse.
- Essayez Angle courbé, Vague ou Festons et définissez le nombre de répétitions.
- Réglez la profondeur de la courbe, ainsi que le bord (bas, haut ou les deux).
- Copiez le CSS.
Courbes avec clip-path
La courbe est un polygon() composé de dizaines de points qui suivent l'arc, chacun défini avec calc(100% - …) afin que sa profondeur reste fixe en px ou en vw. Pour un bas elliptique simple, vous pouvez aussi utiliser border-radius: 0 0 50% 50% / 0 0 80px 80px, mais cela courbe également les angles de la zone de contenu ; la version clip-path ne découpe que le bord.
Pour des vagues superposées, consultez le générateur de vagues SVG ; pour les angles et les zigzags, le générateur de séparateurs de section.
Aussi recherché comme : section courbe css, séparateur section courbe, bas de section courbe css, hero section courbe css, séparateur courbe css, bord arrondi section css, section en arc css, clip-path courbe.
Outils complémentaires : Séparateur de section courbe
- Section inclinée CSS — Créez des sections inclinées, en biais ou en diagonale, le style classique des pages d'atterrissage, avec une seule règle clip-path.
- Générateur de bordure zigzag CSS — Découpez un bord en zigzag, en dents de scie, festonné ou en escalier sur vos sections, cartes, coupons et tickets de caisse.
- Générateur border-radius — Arrondissez les coins de n'importe quel élément : utilisez un seul curseur pour tous les coins, ou réglez chaque coin séparément.
- Générateur clip-path CSS — Découpez images et éléments en n'importe quelle forme : choisissez l'une des 15 formes de départ (triangle, hexagone, étoile, flèche, chevron, bulle de dialogue, cercle, ellipse, rectangle arrondi en inset…), puis déplacez les points sur un exemple ou sur votre propre image.
Questions fréquentes
Comment créer un bas courbe sur une section ?
Choisissez Courbe et copiez le CSS : un polygone clip-path trace une courbe le long du bord inférieur. Vous pouvez aussi utiliser border-radius: 0 0 50% 50% / 0 0 80px 80px pour obtenir un bas elliptique simple.
La courbe peut-elle aller vers l'intérieur ?
Oui — Creux courbe le bord vers l'intérieur, de sorte que la section suivante remonte dans celle-ci.
Un polygone courbe est-il assez lisse ?
Oui. La courbe utilise des dizaines de points ; à des tailles normales, elle rend exactement comme une courbe SVG.
Puis-je installer Séparateur de section courbe en tant qu’application web et l’utiliser hors ligne ?
Oui. Séparateur de section courbe 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.