Générateur de clip-path CSS
Créez des formes clip-path CSS : polygones à points déplaçables et préréglages, cercle, ellipse et inset à coins arrondis. Aperçu en direct et code à copier.
Forme
Réglages de la forme
Faites glisser les poignées dans l’aperçu ou saisissez des valeurs exactes.
Aperçu
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Outils Connexes
Voir ToutQu'est-ce que Générateur de clip-path ?
Dessine visuellement des formes clip-path. Les polygones se modifient en faisant glisser les points dans l'aperçu ou en saisissant des pourcentages exacts, avec des préréglages allant du triangle à l'étoile et à la bulle de dialogue ; les formes cercle, ellipse et inset se règlent avec des curseurs.
Comment utiliser Générateur de clip-path
- Choisissez une Forme : Polygone, Cercle, Ellipse ou Inset.
- Pour les polygones, choisissez un préréglage, puis faites glisser les poignées ou saisissez le pourcentage X/Y de chaque point ; utilisez Ajouter un point / Supprimer le point.
- Pour cercle et ellipse, réglez le rayon et le centre ; pour inset, réglez Haut, Droite, Bas, Gauche et un Rayon des coins facultatif.
- Activez Afficher la zone découpée pour voir ce qui est coupé.
- Copiez le code CSS.
Exemple
Hexagon preset with point 1 moved to X 20%
clip-path: polygon(20% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Quand utiliser Générateur de clip-path
Utilisez clip-path pour des formes d'images décoratives, des bords de sections en biais, des avatars hexagonaux et des animations de révélation (clip-path s'anime entre formes ayant le même nombre de points). Le contenu hors de la forme est masqué et ne reçoit pas les clics. Pour des rectangles arrondis, préférez border-radius ; pour des formes autour desquelles le texte doit s'écouler, utilisez shape-outside.
Comment fonctionne Générateur de clip-path
Les coordonnées sont des pourcentages de la boîte de bordure de l'élément, mesurés depuis le coin supérieur gauche. Les polygones sont écrits polygon(x% y%, …) dans l'ordre des points, les cercles circle(r% at x% y%), les ellipses ellipse(rx% ry% at x% y%) et les inset inset(haut droite bas gauche round r) avec les quatre décalages raccourcis comme la notation abrégée de margin. Ajouter un point insère un nouveau point à mi-chemin entre le point sélectionné et le suivant.
Cas d'utilisation courants
- Avatars en forme d'hexagone ou d'étoile
- Bords de bandeaux en biais
- Indicateurs d'étapes en flèche et chevron
- Cartes en forme de bulle de dialogue
- Animations de survol avec changement de forme
Questions Fréquentes
Ai-je besoin de -webkit-clip-path ?
Pas pour les formes de base dans les navigateurs actuels ; Safari prend en charge la propriété sans préfixe depuis la version 13.1.
Puis-je animer clip-path ?
Oui, avec une transition ou des keyframes, tant que les deux formes sont du même type et que les polygones ont le même nombre de points.
Pourquoi ne puis-je pas cliquer sur la partie masquée de mon élément ?
clip-path découpe aussi la détection des clics : les zones en dehors de la forme ne sont pas cliquables.