Générateur de clip-path CSS

Par Bogdan Sandu (EN) · Publié 9 juin 2025 · Dernière mise à jour 13 septembre 2026

Déplacez les points, puis copiez le code. Ce générateur CSS clip-path est un éditeur visuel de polygones : déplacez les poignées dans l’aperçu et la valeur de clip-path affichée en dessous s’actualise en continu. Les valeurs sont exprimées en pourcentages afin que la forme s’adapte à la taille de l’élément auquel vous l’appliquez.

Ce que l'outil fait :

• Faites glisser les points sur l'aperçu en direct pour remodeler le polygone ; faites un clic droit sur un point pour le supprimer
• 18 presets à partir de : triangle, trapèze, parallélogramme, losange, pentagon à travers l'octogone, étoile, croix, bulle de message, flèches, chevrons, plus cercle, ellipse et rectangle arrondi
• Pourcentage de sortie afin qu'une valeur fonctionne à chaque taille d'élément
• Copier la déclaration clip-path: …; terminée en un seul clic, ou Réinitialiser la forme pour recommencer

Les préréglages de cercle, d'ellipse et de rectangle arrondi sont copiés sous forme de valeurs circle(), ellipse() et inset(). Tout ce que vous dessinez à la main est un polygon(). Il n'y a pas de mode path() ni de changement d'unité de pixel ; pour les courbes au-delà de ce qu'un polygone peut approximer, la route SVG plus bas est celle à emprunter.

Comment utiliser ce générateur de chemin de clip

1. Choisissez un préréglage dans le panneau de droite ou conservez la forme par défaut
2. Faites glisser un point pour le déplacer. Cliquez avec le bouton droit sur un point pour le supprimer et simplifier le contour
3. Regardez la valeur sous l'aperçu. C'est la déclaration exacte clip-path, déjà en pourcentages
4. Cliquez sur Copier et collez-le dans la règle de votre image, carte ou section
5. Testez sur l'élément réel sur quelques largeurs, puisque les pourcentages suivent la propre boîte de l'élément, pas celle de l'aperçu.

Une coupe diagonale de héros est la chose la plus commune que les gens construisent ici. Quatre points, un bord incliné :

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Le reste de cette page couvre ce que la propriété peut faire au-delà des polygones, comment les coordonnées et les boîtes de référence se comportent, et où une forme générée a tendance à se casser une fois qu'elle est en ligne.

Qu'est-ce qu'un générateur de chemin de clip CSS ?

Un générateur de chemin de clip CSS est un outil basé sur un navigateur qui construit des valeurs de chemin de clip via une interface visuelle au lieu de coordonnées saisies à la main.

Il se trouve au-dessus de la propriété clip-path (EN) elle-même, qui provient du CSS Module de masquage (EN) et cache tout ce qui se trouve en dehors d'une forme choisie.

La propriété est native de CSS (EN), donc le travail du générateur est de traduire, en transformant les points glissés dans une syntaxe que le navigateur comprend déjà.

Ce qui le rend différent d'un simple extrait de code est la boucle de rétroaction : vous déplacez une poignée, la forme se met à jour à l'écran, et la chaîne polygon() ou circle() correspondante se met à jour avec elle.

Pas de compilation, pas d'étape d'aperçu séparée, pas de devinettes sur les pourcentages.

En bref :

• Catégorie : un outil interactif d'édition de formes
• Fonction : convertit les points glissés en CSS prêt à coller

Quelles sont les fonctions de base de clip-path ?

Cinq fonctions de base de forme couvrent presque tout ce qu'un générateur peut produire : polygon(), circle(), ellipse(), inset(), et path().

Chacun prend un type d’entrée différent. Certains générateurs changent de mode d'édition en fonction de la fonction ; celui-ci édite les polygones et sert les autres formes comme préréglages.

path() est l'unique exception, puisqu'elle accepte les données de chemin SVG (EN) brutes.

C'est ainsi qu'un générateur peut vous donner des courbes que les mathématiques polygonales simples ne peuvent pas produire.

/* the same idea in three functions */
.avatar  { clip-path: circle(50% at 50% 50%); }
.card    { clip-path: inset(0 0 0 0 round 16px); }
.badge   { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

La fonction inset() accepte également les coins arrondis, en utilisant exactement le même modèle de valeur qu'un générateur standard de border-radius.

La liste des fonctions de forme ne cesse de croître. Chrome a livré une sixième option, shape(), dans Chrome 135 (EN), avec Safari suivant à la version 18.4.

Il s'adapte aux contours réactifs, non polygonaux, courbes incluses, sans avoir besoin d'un fichier SVG séparé.

Boîte de référence et unités de coordonnées dans le chemin du clip

Les coordonnées du chemin de détourage sont disponibles dans plusieurs unités différentes, et le choix affecte le comportement de la forme une fois la page redimensionnée. Ce générateur écrit uniquement des pourcentages, ce qui est la bonne valeur par défaut pour tout ce qui doit être redimensionné.

• Valeurs de pourcentage : s'étale avec l'élément, de sorte que la forme conserve ses proportions lorsque la boîte est redimensionnée
• Valeurs de pixels : restent fixes, utile pour une forme qui ne doit jamais s'étirer, comme une découpe de badge
• Unités de fenêtre : associez la forme à la fenêtre du navigateur au lieu de l'élément.

Cette option relative à la fenêtre de visualisation est la plus importante sur les sections pleine longueur, où la forme doit suivre le navigateur viewport (EN) plutôt qu'un élément parent.

Les coordonnées basées sur le pourcentage, quant à elles, sont ce qui fait d'une forme coupée une partie d'un véritable design réactif (EN). Les points se déplacent proportionnellement à chaque point d'arrêt.

Chaque coordonnée est également mesurée par rapport à une boîte de référence spécifique, et la boîte que vous choisissez décide où "0%" commence réellement.

Changer la boîte de référence sans ajuster les coordonnées est une raison courante pour laquelle une forme générée a l'air correcte dans l'outil mais se déplace une fois qu'elle est active.

Comment un générateur de chemin de clip transforme-t-il une forme en code CSS ?

Faites glisser un point, et le générateur recalcule la fonction de forme en coulisses, en temps réel.

Il n'y a pas de bouton "générer" séparé dans la plupart des outils, car le code est toujours à jour.

Méthodes d'édition courantes :

• Faites glisser les poignées sur une image d’aperçu en direct
• Un éditeur point par point avec des champs de saisie numérique
• Dessin à main levée pour les formes irrégulières basées sur des chemins

Une fois que vous êtes satisfait de la forme, l'outil vous donne l'une des deux sorties.

La plupart des générateurs utilisent par défaut une déclaration de chemin de clip prête que vous collez directement dans une feuille de style.

Une poignée exporte des données de chemin SVG brutes à la place, ce qui est utile si vous construisez la forme dans un document SVG plutôt que dans une règle CSS.

Comment se comporte le clip-path dans les animations et les transitions ?

clip-path s'anime comme n'importe quelle autre propriété CSS, via une règle de transition ou une séquence d'animation complète.

Il est piloté par deux mécanismes en particulier : les transitions pour les changements d'état simples et les images clés CSS (EN) pour les séquences en plusieurs étapes.

Points de correspondance : une forme avec le même nombre de coordonnées aux deux extrémités se métamorphose en douceur.

Points incohérents : un nombre de points différent entre les deux états fait que la forme s'accroche au lieu d'être interpolée.

Coupler la transition avec une courbe d'atténuation cubique-bézier personnalisée est une façon courante de rendre une révélation de forme moins mécanique.

.card {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 400ms cubic-bezier(.4, 0, .2, 1);
}
.card:hover {
  /* same four points, so the shape tweens instead of snapping */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

Quels navigateurs prennent en charge clip-path, et que se passe-t-il quand ils ne le font pas ?

La prise en charge par le navigateur de clip-path n'est plus un risque réel, et les chiffres le confirment.

• Largement disponible depuis janvier 2020 : clip-path a atteint le statut de base sur les principaux navigateurs, par MDN (EN)
• Support global à 96 % : Can I Use (EN) suit le support des chemins de clip à environ 96 % du trafic de navigateur suivi
• Préfixe supprimé en 2024 : WordPress core (EN) a supprimé -webkit-clip-path de son CSS après que l'utilisation de Chrome 24 à 54 soit tombée à 0,1% et que Safari en dessous de 13 soit tombé à 0,05%

Cette étiquette de référence est importante car elle indique que la fonctionnalité peut être expédiée en toute sécurité sans polyfill dans les projets ordinaires.

Cela ne signifie pas que toutes les fonctions de clip-path sont arrivées en même temps, puisque les ajouts les plus récents comme shape() sont toujours en train de rattraper leur retard dans les moteurs.

Dans un navigateur qui ignore complètement la propriété, trois choses se produisent généralement :

• L'élément est rendu à sa taille et sa forme réelles, non coupé
• Rien d'autre sur la page ne se casse, puisque clip-path affecte uniquement la peinture
• Tout survol ou animation lié à la forme ne fonctionne tout simplement pas

Écrire un arrière-plan ou une règle de bordure avant la déclaration de chemin de clip est une solution de rechange suffisante pour la plupart des designs. Cela aide également les tests de compatibilité entre navigateurs (EN) à détecter les lacunes à un stade précoce.

À quoi sert un générateur de chemin de clip CSS ?

La plupart des cas d'utilisation réels relèvent d'une poignée de modèles de conception répétables, et non d'expériences ponctuelles.

• Coupes de section diagonale qui rompent une page autrement rectangulaire
• Séparateurs de forme entre un en-tête et le contenu ci-dessous
• Effets de survol sur les fiches produits et les vignettes
• Blob ou des cultures organiques pour les images de portrait et d'illustration

Les découpes diagonales apparaissent le plus souvent dans une section héroïque landing page (EN), où un seul bord incliné sépare l’intro du bloc de contenu suivant.

Les découpes triangulaires suivent les mêmes mathématiques de polygones qui alimentent un générateur de triangles CSS (EN) dédié, juste appliqué à une photo ou à un arrière-plan de carte au lieu d'une boîte ordinaire.

Rien de tout cela n'est une technique de mise en page courante, et les données le confirment. clip-path n'apparaît que sur environ 0,06% de tous les chargements de page Chrome suivis par les compteurs d'utilisation de Chrome (EN).

Ce faible nombre correspond à un outil utilisé pour un accent visuel délibéré, pas quelque chose dont chaque site a besoin.

Quel outil de génération de chemin de clip devriez-vous utiliser ?

Quatre outils couvrent presque tous les flux de travail, et le bon choix dépend si vous recommencez à zéro ou si vous modifiez une forme déjà active sur une page. Le générateur sur cette page se trouve dans le même emplacement que Clippy : poignées de déplacement, sortie polygonale, préréglages, rien à installer.

Clippy (EN), construit par le développeur Bennett Feely, est la façon la plus connue d'obtenir une chaîne polygon() sans rien installer.

L'éditeur de chemin de forme de Firefox (EN) fonctionne différemment. Il modifie la valeur de chemin de clip déjà présente dans votre panneau Règles CSS plutôt que d’en générer une nouvelle à partir de zéro.

Chrome n'a pas d'équivalent natif intégré dans DevTools. L'option la plus proche est une extension tierce qui n'a pas été mise à jour depuis 2015.

Si vous modélisez une mise en page avant qu'il n'existe de CSS, découper une forme dans Figma (EN) est généralement plus rapide que de se battre avec les coordonnées dans un outil de navigateur.

Deux questions réduisent rapidement le choix :

• Avez-vous besoin de la forme une fois, ou allez-vous continuer à l'ajuster lorsque la mise en page change
• La forme existe-t-elle déjà sur une vraie page ou partez-vous d'une toile vierge

Quand devriez-vous utiliser clip-path au lieu du masque CSS ou de l'élément clipPath SVG ?

Les trois peuvent cacher une partie d'un élément, mais ils résolvent des problèmes différents.

clip-path :

• Avantages : formes à bords durs avec une syntaxe courte et lisible
• Inconvénient : ne peut pas fondre ou adoucir un bord

Masque CSS

• Avantages : transparence basée sur un dégradé et une image, pas seulement une forme
• Inconvénient : plus lourd sur les performances de peinture sur de grandes surfaces

SVG clipPath :

• Avantage : une définition de forme réutilisée sur plusieurs éléments
• Inconvénient : réside dans le balisage plutôt que dans la feuille de style, il est facile de perdre la trace

Le côté dégradé de cette comparaison est du CSS simple : mask-image prend la même syntaxe de dégradé utilisée partout ailleurs, donc un générateur de dégradé CSS (EN) couvre la valeur et vous échangez le nom de la propriété.

L'élément SVG <clipPath> est en fait stable depuis plus longtemps que la propriété CSS construite pour le référencer, Baseline largement disponible depuis juillet 2015 (EN).

path() lui-même est arrivé des années après clip-path, atterrissant dans Chrome 88, Firefox 71 et Safari 13.1, selon les données de compatibilité des navigateurs suivies par MDN (EN).

Comment construire une forme avec un générateur de chemin de clip CSS ?

Le flux de travail change à peine d’un générateur à l’autre.

1. Choisissez une fonction de forme de départ, généralement polygon() pour une coupe personnalisée ou circle() pour un recadrage simple
2. Faites glisser des points sur l’aperçu jusqu’à ce que le contour corresponde à ce que vous voulez
3. Changez l'unité de coordonnées en pourcentage si la forme doit être redimensionnée avec son conteneur (ce générateur est déjà là)
4. Copiez la déclaration de chemin de clip générée dans votre feuille de style
5. Testez la forme sur quelques largeurs d'écran avec des media queries (EN), car une forme qui semble droite sur une largeur peut dériver sur une autre.

Deux erreurs expliquent la plupart des plaintes « cela a fonctionné dans l'outil mais pas sur mon site ».

• Copie des coordonnées en pixels à partir d’un aperçu qui utilise une taille d’élément différente de celle de la page réelle
• Oublier que les points de pourcentage sont mesurés par rapport à la boîte de référence, et non à la fenêtre complète du navigateur

Quand clip-path ne fonctionne-t-il pas ?

clip-path échoue silencieusement. Rien ne génère d'erreur, la forme ne se comporte pas comme elle l'avait été dans le générateur.

• Les clics disparaissent avec le clip : par défaut, les événements pointeur ne sont pas envoyés à l'intérieur de la région coupée, donc un bouton partiellement caché par une forme cesse de recevoir des clics là (MDN (EN))
• z-index peut se déplacer de manière inattendue : toute valeur de chemin de détourage autre que none crée un nouveau contexte d'empilement, de la même manière que l'opacité le fait pour les valeurs inférieures à 1. Cela peut modifier discrètement la façon dont les éléments qui se chevauchent se superposent.
• Le redimensionnement brise les mathématiques : les coordonnées de pourcentage sont verrouillées à la boîte de référence au moment du rendu. Une boîte qui change de taille via JavaScript plutôt que CSS peut laisser la forme coupée au mauvais endroit

Rien de tout cela n'apparaît dans l'aperçu d'un générateur, puisque l'aperçu est un instantané unique et statique d'une taille d'élément.

En testant la forme à l'intérieur de la page réelle, à plus d'une largeur et avec de vrais éléments interactifs en dessous, les trois sont capturés avant leur expédition.

Questions fréquentes : Générateur de clip-path CSS

Quelle est la différence entre clip-path et shape-outside ?

clip-path cache des parties d'un élément visuellement, tandis que shape-outside ne change que la façon dont le texte en ligne s'ajuste autour d'un élément flottant.

Les deux partagent les mêmes fonctions de forme de base, mais shape-outside ne touche jamais ce que l'élément lui-même peint.

Le clip-path peut-il être combiné avec la transformation CSS ?

Oui. clip-path et transform s'appliquent indépendamment, donc la mise à l'échelle, la rotation ou la translation d'un élément ne désactive pas son clip.

La forme reste ancrée à la boîte de référence de l'élément, se déplaçant et se redimensionnant avec toute transformation appliquée.

Est-ce que clip-path nuit aux performances de la page ?

Les formes simples comme circle() ou polygon() sont peu coûteuses à rendre et causent rarement un ralentissement mesurable.

Les formes path() complexes sont recalculées à chaque image d'animation, donc le découpage d'un élément volumineux et fréquemment animé coûte plus cher que le découpage d'un petit élément statique.

Comment rendre une forme de tracé de clip réactive sur les points d’arrêt ?

Les coordonnées de pourcentage sont mises à l’échelle automatiquement, mais elles peuvent déformer une forme lorsque le rapport d’aspect change brusquement entre les points d’arrêt.

L'écriture d'une règle clip-path séparée dans une requête média, au lieu d'une forme de pourcentage pour chaque largeur, permet de garder les proportions intentionnelles plutôt qu'accidentelles.

Le clip-path peut-il être appliqué aux images d'arrière-plan ?

Oui, mais pas de manière sélective. clip-path coupe toute la boîte de l'élément au stade de la peinture, de sorte que toute image d'arrière-plan, couleur ou bordure soit coupée avec le premier plan.

Pour couper uniquement l'arrière-plan et laisser le texte ou les icônes intacts, donnez à l'arrière-plan son propre élément.

Que devriez-vous vérifier d'abord avec un générateur de chemin de clip CSS ?

Un générateur de chemin de clip CSS ne gagne la confiance qu'après que sa sortie survit à trois vérifications. La boîte de référence correspond à l'élément actif, les unités de coordonnées tiennent à plus d'une largeur d'écran, et la forme reçoit toujours des clics là où un visiteur s'y attend.

L'ordre ressemble à ceci :

• Faites correspondre la boîte de référence en premier
• Redimensionner le navigateur seconde, vérifier la dérive de pourcentage
• Cliquez sur la troisième forme, confirmant que rien d'important n'est avalé

L'exécution du test de clic avant le test de redimensionnement permet d'économiser un premier passage, mais risque d'avoir une forme qui a l'air correcte et qui ne l'est pas une fois que la mise en page est déplacée.

Cet ordre est valable pour le paysage des navigateurs vérifié en septembre 2026. Il se détend une fois que les nouvelles fonctions de forme de base comblent l'écart restant entre les moteurs.

Une fois qu'une forme a passé les trois vérifications, l'animation est l'étape logique suivante. Un générateur d'animation CSS (EN) dédié gère le timing des images clés sans courbes d'assouplissement manuscrites.