Comment utiliser : Section inclinée CSS
- L'aperçu démarre avec un bord inférieur incliné. Choisissez Les deux pour une bande inclinée, ou Haut.
- Utilisez Inverser horizontalement pour changer le sens de l'inclinaison.
- Réglez la profondeur de coupe en px (angle fixe) ou en vw (s'adapte à l'écran).
- Copiez le CSS.
Sections inclinées sans skew
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%) incline le bord inférieur d'une section tandis que le texte à l'intérieur reste droit, contrairement à transform: skewY(), qui incline aussi le contenu. Remontez la section suivante sous l'angle grâce à une marge négative pour que son arrière-plan comble l'espace.
D'autres formes de bordure (courbes, flèches, vagues et zigzags) sont disponibles dans le Générateur de séparateurs de section.
Aussi recherché comme : section en diagonale css, section angulaire css, fond incliné css, section skew css, séparateur diagonal css, hero section inclinée.
Outils complémentaires : Section inclinée CSS
- Séparateur de section courbe — Arrondissez le bord d'un hero ou d'une section avec une courbe — convexe, creusée, un angle courbé, une douce vague ou des festons — uniquement en CSS.
- 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 de vagues SVG — Concevez des séparateurs de sections ondulés pour vos pages d'accueil : ajoutez ou retirez des vagues (jusqu'à 6, chacune avec sa couleur, son opacité et sa forme), réglez le nombre de crêtes, la hauteur et le lissage, choisissez les couleurs et placez la vague en haut ou en bas.
- 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 incliner à la fois le haut et le bas d'une section ?
Choisissez l'option Les deux : le polygone coupe le haut et le bas en parallèle, ce qui donne une bande inclinée — clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%).
Faut-il utiliser skewY ou clip-path ?
clip-path. skewY incline aussi le texte et les images de la section, il faut donc un second skew inverse sur le contenu ; clip-path ne coupe que le bord.
Comment conserver le même angle sur mobile ?
Utilisez une profondeur de coupe en vw : la coupe s'adapte à la largeur de l'écran, l'angle reste donc identique quelle que soit la largeur.
Puis-je installer Section inclinée CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Section inclinée CSS 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.