Comment utiliser : Générateur de séparateur de section
- Choisissez une forme : angle, flèche, encoche, courbe, creux, angle courbé, vague, zigzag, festons ou marches.
- Sélectionnez le bord à découper : bas, haut ou les deux (avec un angle, les deux bords donnent la bande inclinée classique).
- Définissez la profondeur de coupe. Utilisez les px ou les vw pour que l’angle reste constant quand la section grandit ; pour les vagues et les zigzags, réglez le nombre de répétitions.
- Copiez le CSS sur votre section. La règle facultative remonte la section suivante sous la coupe, afin qu’aucun espace ne subsiste.
Comment fonctionnent les sections inclinées
La section conserve sa boîte rectangulaire habituelle ; clip-path: polygon() masque simplement un triangle (ou une courbe, ou un zigzag) le long de son bord. Chaque point du bord découpé utilise calc(100% - 80px), la coupe fait donc toujours 80 px de profondeur, que ce soit sur un hero court ou une section longue, et l’angle ne change pas lorsque le contenu s’allonge.
.section {
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
padding-bottom: calc(80px + 3rem);
}
.section + * { margin-top: -80px; padding-top: calc(80px + 3rem); }La seconde règle fait remonter la section suivante sous la coupe, si bien que son arrière-plan, et non celui de la page, remplit l’espace incliné. z-index: 1 garde la section découpée au premier plan. Les courbes, vagues et festons sont dessinés sous forme de polygones à nombreux points, que tous les navigateurs modernes affichent avec fluidité.
clip-path, skew ou SVG : quelle différence ?
transform: skewY() incline aussi la section, mais déforme également son contenu : il faut alors annuler la déformation de chaque enfant. Un séparateur SVG nécessite un élément supplémentaire. clip-path découpe la section elle-même, arrière-plans, dégradés et photos compris, avec une seule règle. Pour des vagues organiques superposées, utilisez le générateur de vagues SVG ; pour estomper doucement un bord au lieu de le découper, utilisez le générateur de masque CSS.
Aussi recherché comme : section inclinée css, section en diagonale css, séparateur de section css, bord en zigzag css, section courbe css, clip-path séparateur de section, forme de séparation css, section oblique css.
Outils complémentaires : Générateur de séparateur de section
- 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.
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Générateur de blobs SVG — Créez des formes organiques lisses pour les arrière-plans de bannière, les avatars et les illustrations.
- Générateur triangle CSS — Créez un triangle en CSS pur pour une flèche d'infobulle, un caret de menu déroulant ou une bulle de dialogue : choisissez l'une des 8 directions, la largeur, la hauteur et la couleur, puis copiez soit l'astuce classique des bordures, soit une version plus simple en clip-path.