CSS Clip-path Builder
Click on the canvas to add points.
Drag handles to move.
Right-click a handle to remove.
Understand CSS Clip-path Builder
Construit visuellement des formes CSS clip-path — polygon, circle, ellipse et inset — et produit la propriété à coller.
How it works
clip-path définit une région, et tout ce qui se trouve à l'extérieur n'est pas peint. `polygon()` prend une liste de points `x% y%` mesurés depuis le coin supérieur gauche de la boîte de l'élément, si bien que `polygon(50% 0, 100% 100%, 0 100%)` est un triangle ; `circle()` et `ellipse()` prennent des rayons plus une position `at` ; `inset()` prend des retraits en haut, à droite, en bas et à gauche, avec un rayon `round` facultatif. Les pourcentages se résolvent indépendamment sur chaque axe par rapport à la boîte de l'élément, ce qui veut dire que la forme s'étire avec l'élément au lieu de conserver ses proportions.
When to use it
- Découper un bord en diagonale ou incliné sur un séparateur de section, sans exporter d'image
- Masquer une image ou une vidéo dans un cadre non rectangulaire, en CSS pur
- Construire une flèche, un chevron, un badge ou un ruban qui exigerait sinon une image de fond
- Créer une animation d'apparition en effectuant une transition entre deux polygones
Watch out for
- Le découpage ne change pas la mise en page. L'élément occupe toujours sa boîte entière, si bien que les voisins ne viennent pas occuper l'espace retiré — ajoutez une marge négative ou ajustez vous-même les espacements.
- Les pourcentages s'appliquent par axe, si bien qu'une forme se déforme quand l'élément change de taille. Une diagonale à 45° pour une largeur donnée n'est plus à 45° pour une autre ; utilisez des unités en pixels ou en unités de fenêtre quand l'angle doit tenir.
- Les transitions entre polygones ne s'interpolent que si les deux comptent le même nombre de points dans le même ordre. Ajoutez des points répétés pour compléter la forme la plus courte, plutôt que d'attendre du navigateur qu'il les fasse correspondre.
- Un clip-path découpe tout ce que peint l'élément, y compris sa box-shadow, son outline et son anneau de focus. Un bouton découpé peut perdre entièrement son indicateur de focus visible, ce qui est une régression d'accessibilité.
Frequently Asked Questions
Quelles formes clip-path permet-il de créer ?
Quatre fonctions de forme : polygon() pour des formes arbitraires à n côtés (faites glisser les points de contrôle), circle() pour des cercles parfaits avec centre et rayon, ellipse() pour des ovales, et inset() pour des découpes rectangulaires avec des coins arrondis facultatifs via border-radius.
Comment créer un séparateur de section en diagonale avec clip-path ?
Utilisez polygon() sur le conteneur de section : polygon(0 0, 100% 0, 100% 90%, 0 100%). Cela découpe le coin inférieur droit en diagonale et crée un bord inférieur incliné. Ajustez les pourcentages pour changer l'angle et le sens de la diagonale.
clip-path modifie-t-il le flux de la mise en page ?
Non — clip-path n'affecte que le rendu visible. L'élément occupe toujours ses dimensions d'origine complètes dans la mise en page, ce qui peut créer des zones cliquables invisibles ou des vides de débordement. Ajoutez overflow: hidden au parent si les espacements paraissent faux.
How to Use CSS Clip-path Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.