Mode d'emploi
- Saisissez un Nom de classe pour la règle, comme triangle, et choisissez une Forme.
- Pour un polygon, faites glisser un point sur l'Aperçu, ou saisissez son x et son y dans les champs. Utilisez Ajouter un point et Supprimer le dernier point pour changer le nombre de points.
- Pour inset, circle ou ellipse, saisissez les nombres dans les champs. L'aperçu se redessine aussitôt.
- Copiez la règle CSS dans votre feuille de style, et mettez la classe sur l'élément à découper.
Les quatre formes
Le module CSS Shapes du W3C (en anglais) définit les formes de base que prend clip-path. Un polygone est une liste de points, chacun formé de deux positions, et les points sont reliés dans l'ordre où vous les listez. Un retrait coupe la boîte à quatre distances, données dans l'ordre haut, droite, bas et gauche. Un cercle ou une ellipse a un rayon, ou deux rayons, et un centre écrit après le mot-clé at.
- polygon(50% 0%, 100% 100%, 0% 100%) a trois points, chacun avec un x et un y en pourcentage.
- inset(10% 20% 10% 20%) coupe 10 % en haut et en bas, et 20 % à gauche et à droite.
- circle(60px at 50% 50%) a un rayon de 60 px et son centre au milieu de la boîte.
Pourcentages et boîte de référence
Un pourcentage dans un point, un retrait ou un centre est une part de la boîte, et la spécification le calcule par rapport à la taille utilisée de la boîte de référence. Le module CSS Masking du W3C (en anglais) indique que, lorsqu'aucune boîte de référence n'est donnée, la boîte de bordure est utilisée. Les parties de l'élément hors de la forme ne sont pas dessinées.
Ce que l'outil n'écrit pas
- Une règle de remplissage pour un polygone, la clause round d'un retrait, et les formes url() ou path() de clip-path.
- Un rayon en pourcentage pour un cercle ou une ellipse. Le texte des formes que cet outil a lu ne dit pas comment il se résout : les rayons sont donc en px.
Exemple détaillé : un triangle
Un triangle est un polygone à trois points : le centre du haut, le bas à droite et le bas à gauche de la boîte. Le tableau donne chaque point, et la règle écrite par l'outil est .triangle, avec clip-path réglé sur polygon(50% 0%, 100% 100%, 0% 100%).
| Point | x | y |
|---|---|---|
| 1 | 50 % | 0 % |
| 2 | 100 % | 100 % |
| 3 | 0 % | 100 % |
Questions fréquentes
Pourquoi les rayons d'un cercle ou d'une ellipse sont-ils en pixels ?
Le texte des formes ne dit pas comment un rayon en pourcentage se résout pour circle() et ellipse(), donc l'outil propose seulement des pixels. Un rayon en pixels a un seul sens, et l'aperçu le dessine à la taille que la boîte a sur votre écran.
Pourquoi la forme disparaît-elle lorsque je saisis une valeur fausse ?
L'outil affiche la raison en rouge et ne dessine aucune forme, pour ne jamais vous donner une règle fausse. Une valeur hors de sa plage, ou des retraits qui ne laissent aucune partie de la boîte, en sont les causes habituelles.
L'ordre des points compte-t-il ?
Oui. Les points sont écrits dans l'ordre où vous les listez, et cet ordre trace le contour. Déplacer un point modifie la forme sans modifier les autres.
En quoi clip-path diffère-t-il de border-radius ?
clip-path découpe l'élément selon une forme, si bien que la partie extérieure n'est pas dessinée, alors que border-radius arrondit seulement les angles. La boîte de référence de clip-path est la boîte de bordure, sauf si une autre est donnée.
Combien de points un polygone peut-il avoir ici ?
De 3 à 20. Davantage de points donnent un contour plus fin, mais une règle plus longue, et l'aperçu gère jusqu'à 20 poignées.
Le CSS que je crée est-il envoyé quelque part ?
Non. L'aperçu et la règle sont créés dans votre navigateur. Rien n'est stocké ni envoyé à notre serveur, donc copiez le CSS avant de quitter la page.
Sources
- W3C (en anglais) : CSS Shapes Module Level 1, basic shapes
- W3C (en anglais) : CSS Masking Module Level 1, the clip-path property
Chiffres et texte vérifiés pour la dernière fois le jeudi 12 novembre 2026.