Différence entre clip-path et border-radius ?

`border-radius` arrondit les coins d'un rectangle - c'est toujours un rectangle dessous. `clip-path` remplace le rectangle par n'importe quel polygone (ou cercle, ellipse, voire un chemin SVG) et masque tout ce qui dépasse. Utilisez border-radius pour des cartes arrondies ; utilisez clip-path quand la forme n'est pas un rectangle arrondi - triangles, hexagones, flèches vers une infobulle, coins ruban, etc.

Clip-path affecte-t-il la mise en page ?

Non. L'élément garde sa boîte d'origine pour la mise en page - marges, bordures et contenu suivant se placent comme s'il n'y avait pas de clip. Les zones de hover et de clic gardent aussi le rectangle d'origine par défaut, ce qui peut surprendre : un bouton clippé en triangle déclenche encore le hover dans le coin vide. Ajoutez des règles `pointer-events` ou enveloppez la forme dans un SVG si vous voulez que la zone de clic suive le clip.

Peut-on animer le clip-path ?

Oui, mais seulement entre formes ayant le même nombre de points - le navigateur interpole `polygon(0 0, 100% 0, 50% 100%)` en un autre polygone à 3 points, pas en un polygone à 4. Idem pour `circle()` et `ellipse()` : même fonction, paramètres différents = ça anime ; mélanger les fonctions, non. Pour des transitions complexes, utilisez plutôt des bibliothèques d'animation de chemin SVG.

Pourquoi mon clip-path coupe ma bordure ?

Les bordures sont à l'intérieur du clip, donc une bordure épaisse sur un div clippé en triangle se fait couper le long des diagonales. Deux solutions : utilisez un SVG avec un attribut `stroke` (propre, scalable), ou utilisez `filter: drop-shadow()` avec un petit spread au lieu d'une bordure (l'ombre suit la forme visible).

Compatibilité navigateurs ?

`clip-path: polygon(...)` et les formes de base (`circle`, `ellipse`, `inset`) sont supportés partout. Les clips à base de chemin (`path('...')`) demandent Chrome 88+, Safari 13.1+, Firefox 97+. L'élément SVG ` ` est un repli portable pour les vieux navigateurs et supporte les chemins partout.

Générateur clip-path CSS

Créez des clip-paths visuellement - triangle, hexagone, étoile, bulle de message - avec aperçu en direct et CSS prêt à copier.

Préréglages

Points du polygone (x% y%, séparés par virgules)

CSS

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Aperçu

Choisissez un préréglage, voyez le clip s'appliquer en direct sur une image d'exemple, copiez le CSS. Les points du polygone sont listés sous l'aperçu - ajustez les pourcentages à la main si un préréglage approche sans être parfait. Basculez le fond entre image, couleur unie et dégradé : le clip-path n'ajoute ni contour ni anti-aliasing, le contraste avec le fond environnant compte.

Comment l'utiliser

Choisissez un préréglage
Triangle, losange, pentagone, hexagone, octogone, étoile, flèche, message, croix, ticket - un clic charge le polygone.
Ajustez les points
Modifiez les coordonnées en pourcentage sous l'aperçu pour affiner. La forme se met à jour en direct.
Testez le fond
Basculez entre image, couleur unie et dégradé pour confirmer que la forme clippée se lit sur les surfaces réelles.
Copiez le CSS
La déclaration `clip-path: polygon(...)` complète est prête à coller dans votre feuille de style.

Qu'est-ce que c'est ?

Un générateur de clip-path CSS construit visuellement la propriété `clip-path`. La forme la plus courante est `polygon(x1 y1, x2 y2, ...)` - une liste de coordonnées en pourcentage qui définit la région visible de l'élément ; tout ce qui sort du polygone est masqué. D'autres fonctions de forme (`circle()`, `ellipse()`, `inset()`, `path()`) couvrent les formes rondes et arbitraires. Le résultat est accéléré par GPU et animable entre variantes de même forme.

Quand l'utiliser

Grilles d'avatars hexagonaux, coins en ruban sur des cartes, pointeurs triangulaires d'infobulles et bulles de chat, sections hero coupées en diagonale, formes de billet pour des offres, étoiles de notation rendues comme remplissages clippés, bulles de message, séparateurs inclinés entre sections, et fonds d'icônes sans SVG.

Erreurs courantes

Oublier que clip-path ne change pas la zone cliquable - l'utilisateur peut cliquer dans le coin triangulaire vide et déclencher quand même le bouton. Essayer d'animer entre polygones de tailles différentes et obtenir un saut au lieu d'une interpolation. Appliquer clip-path à un élément avec une bordure épaisse et s'étonner que la bordure soit tranchée. Utiliser des pourcentages sans verrouiller le ratio d'aspect - un triangle sur un élément large s'aplatit en bande fine.

FAQ

Différence entre clip-path et border-radius ?: `border-radius` arrondit les coins d'un rectangle - c'est toujours un rectangle dessous. `clip-path` remplace le rectangle par n'importe quel polygone (ou cercle, ellipse, voire un chemin SVG) et masque tout ce qui dépasse. Utilisez border-radius pour des cartes arrondies ; utilisez clip-path quand la forme n'est pas un rectangle arrondi - triangles, hexagones, flèches vers une infobulle, coins ruban, etc.
Clip-path affecte-t-il la mise en page ?: Non. L'élément garde sa boîte d'origine pour la mise en page - marges, bordures et contenu suivant se placent comme s'il n'y avait pas de clip. Les zones de hover et de clic gardent aussi le rectangle d'origine par défaut, ce qui peut surprendre : un bouton clippé en triangle déclenche encore le hover dans le coin vide. Ajoutez des règles `pointer-events` ou enveloppez la forme dans un SVG si vous voulez que la zone de clic suive le clip.
Peut-on animer le clip-path ?: Oui, mais seulement entre formes ayant le même nombre de points - le navigateur interpole `polygon(0 0, 100% 0, 50% 100%)` en un autre polygone à 3 points, pas en un polygone à 4. Idem pour `circle()` et `ellipse()` : même fonction, paramètres différents = ça anime ; mélanger les fonctions, non. Pour des transitions complexes, utilisez plutôt des bibliothèques d'animation de chemin SVG.
Pourquoi mon clip-path coupe ma bordure ?: Les bordures sont à l'intérieur du clip, donc une bordure épaisse sur un div clippé en triangle se fait couper le long des diagonales. Deux solutions : utilisez un SVG avec un attribut `stroke` (propre, scalable), ou utilisez `filter: drop-shadow()` avec un petit spread au lieu d'une bordure (l'ombre suit la forme visible).
Compatibilité navigateurs ?: `clip-path: polygon(...)` et les formes de base (`circle`, `ellipse`, `inset`) sont supportés partout. Les clips à base de chemin (`path('...')`) demandent Chrome 88+, Safari 13.1+, Firefox 97+. L'élément SVG `<clipPath>` est un repli portable pour les vieux navigateurs et supporte les chemins partout.