Générateur de Clip-Path CSS

Cet outil génère une valeur CSS clip-path à partir d'un préréglage de forme — cercle, ellipse, triangle, pentagone, hexagone, étoile, ou un rectangle arrondi — et affiche la forme découpée en direct sur un cadre d'aperçu avant que vous copiiez le CSS. Inutile de calculer à la main les coordonnées polygon() pour les formes courantes.

En quoi consiste cet outil ?

clip-path est la propriété CSS qui masque tout ce qui se trouve en dehors d'une région définie d'un élément, ne laissant visible que la forme intérieure — le reste de la boîte de l'élément est toujours présent dans la mise en page, il n'est simplement pas peint. Elle accepte des fonctions de forme de base comme circle(), ellipse(), inset() et polygon(), cette dernière prenant une liste arbitraire de paires de coordonnées x/y pour définir n'importe quelle forme à bords droits.

Les coordonnées de polygon() sont la partie la plus difficile à écrire à la main — un pentagone, un hexagone ou une étoile ont chacun besoin de plusieurs points placés précisément, et une erreur sur un seul déforme toute la forme. Cet outil calcule ces coordonnées pour vous à partir d'un préréglage de forme, met à jour l'aperçu en direct instantanément, et vous donne le CSS clip-path exact à copier.

Source : CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — les spécifications définissant clip-path et ses fonctions de forme de base.

Pourquoi l'utiliser ?

L'aperçu en direct découpe un véritable cadre d'aperçu selon la forme choisie, vous voyez donc le résultat réel plutôt que de l'imaginer à partir de coordonnées.
Sept préréglages de forme — cercle, ellipse, triangle, pentagone, hexagone, étoile et rectangle arrondi — couvrent la grande majorité des cas d'usage de clip-path sans écrire de points polygon() à la main.
Les préréglages cercle, ellipse et rectangle arrondi incluent un curseur de taille/arrondi pour affiner la forme sans modifier les coordonnées.
Génère du CSS clip-path standard prêt à coller sur n'importe quel élément.
Fonctionne entièrement dans votre navigateur — rien de ce que vous configurez n'est envoyé où que ce soit. Gratuit, sans inscription, fonctionne sur mobile.

Mode d'emploi

Choisissez une forme dans le menu déroulant — cercle, ellipse, triangle, pentagone, hexagone, étoile ou rectangle arrondi.
Pour les formes cercle, ellipse et rectangle arrondi, ajustez le curseur de taille/arrondi pour affiner le découpage.
Observez le cadre d'aperçu se mettre à jour en direct lorsque vous changez la forme ou le curseur.
Copiez le CSS clip-path généré et collez-le sur l'élément que vous voulez découper.
Pour une image plutôt qu'une couleur unie, appliquez la même propriété clip-path à une balise <img> ou à un élément avec une background-image.

Exemple

Entrée

Forme : Hexagone

Résultat

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Un découpage hexagonal régulier, couramment utilisé pour des photos de profil façon badge ou des icônes de fonctionnalités.

Formes de base vs. polygon()

Cercle, ellipse et inset (rectangle arrondi) sont des fonctions de forme de base intégrées à CSS avec leur propre syntaxe simple — un ou deux rayons, plus une position centrale optionnelle ou un arrondi des coins. Triangle, pentagone, hexagone et étoile ne sont pas des formes intégrées ; elles sont toutes exprimées avec polygon(), une liste plate de paires de coordonnées x/y traçant le contour de la forme. Cet outil calcule automatiquement ces coordonnées pour les polygones réguliers (espacés uniformément) et une étoile à cinq branches, ce qui est la partie fastidieuse à obtenir correctement à la main.

Modèles courants de clip-path

Avatar ou badge circulaire : circle() avec un rayon moyen, souvent combiné à une image source carrée pour que le cercle ne soit pas étiré en ellipse.
Séparateur de section en angle : un polygone personnalisé (non inclus comme préréglage ici) qui incline le bord supérieur ou inférieur d'une section pleine largeur pour une rupture de page non rectangulaire.
Icône ou badge d'évaluation en étoile : le préréglage étoile, utile comme forme décorative plutôt qu'un SVG dessiné à la main pour les cas simples.
Grille photo hexagonale : images découpées en hexagones disposées en nid d'abeille, un motif courant sur les pages de portfolio ou d'équipe.
Rectangle arrondi comme alternative légère à border-radius lorsque vous avez aussi besoin que le découpage coupe le contenu enfant qui déborde, car border-radius seul ne découpe pas les enfants sans un overflow:hidden supplémentaire.

À associer avec d'autres outils CSS

clip-path est fréquemment combiné avec un dégradé CSS comme arrière-plan découpé, ou avec un box-shadow appliqué à un élément englobant (puisque clip-path découpe aussi l'ombre propre de l'élément, une ombre sur un parent est la solution habituelle pour une forme découpée qui doit quand même sembler flotter).

→ Générateur de Dégradés CSS · Générateur de Border Radius · Générateur de Box Shadow

Foire aux questions

clip-path affecte-t-il la taille de mise en page de l'élément ?

Non — l'élément conserve sa taille et sa position de boîte d'origine à des fins de mise en page ; clip-path ne change que ce qui est peint. Les éléments environnants sont disposés comme si le découpage n'était pas appliqué, ce qui peut surprendre si vous vous attendiez à ce que la forme découpée se comporte comme un élément redimensionné.

Pourquoi mon box-shadow n'apparaît-il pas sur ma forme découpée ?

clip-path découpe tout le rendu de l'élément, y compris toute ombre qu'il projette, donc le box-shadow propre d'un élément découpé en cercle ou en polygone est coupé à la limite du découpage. Pour obtenir une ombre qui suit la forme visible, appliquez plutôt box-shadow à un élément englobant non découpé autour de l'élément découpé.

Puis-je animer ou faire une transition sur une forme clip-path ?

Oui, mais uniquement entre deux valeurs clip-path du même type et avec le même nombre de points — par exemple, un polygon() à 6 points qui transitionne vers un autre polygon() à 6 points. Faire une transition entre des formes fondamentalement différentes (un circle() vers un polygon()) ne s'animera généralement pas de façon fluide selon les navigateurs.

clip-path peut-il être utilisé sur des images de fond, pas seulement sur le contenu de l'élément ?

clip-path découpe l'élément entier — y compris son background-image, background-color, ses bordures et son contenu ensemble — plutôt que l'arrière-plan spécifiquement. Si vous voulez uniquement découper une image de fond en gardant le reste du contenu non découpé, appliquez clip-path à un élément séparé qui ne contient que l'arrière-plan.

clip-path est-il pris en charge dans tous les navigateurs modernes ?

Oui — clip-path avec les fonctions de forme de base (circle, ellipse, inset, polygon) est Baseline et largement disponible dans les principaux navigateurs depuis janvier 2020, selon les données de compatibilité de MDN. Il est généralement sûr de l'utiliser en production sans solution de repli pour les versions actuelles des navigateurs.