Générateur CSS clip-path
Générez facilement des masques CSS clip-path pour vos éléments web avec des formes circulaires, elliptiques ou polygonales prêtes à l'emploi.
Exécuter l’outil
Ce générateur produit des déclarations CSS clip-path pour découper des éléments HTML selon différentes géométries vectorielles. Vous pouvez sélectionner des formes géométriques prédéfinies comme le cercle, l'ellipse, le triangle, l'hexagone, le pentagone, l'étoile ou le losange. Pour les figures circulaires et elliptiques, l'outil intègre directement les paramètres de dimension et de positionnement dans la règle finale. Ainsi, un cercle exploite un rayon en pourcentage associé à un point d'ancrage, tandis qu'une ellipse applique automatiquement un ratio vertical réduit de 0,6 par rapport à la taille principale. Les formes polygonales utilisent des coordonnées fixes en pourcentages, idéales pour structurer des bannières, des cartes ou des boutons stylisés. Le fragment CSS obtenu s'intègre immédiatement dans vos feuilles de style pour masquer des images ou des conteneurs sans recourir à des fichiers graphiques externes. Si une forme non répertoriée est transmise, le système applique la découpe circulaire par défaut pour maintenir un affichage cohérent.
Mode d’emploi
- Indiquez le nom de la forme souhaitée, par exemple circle, ellipse, triangle, hexagon, pentagon, star ou diamond.
- Ajustez la taille numérique pour définir l'échelle en pourcentage des formes circulaires ou elliptiques.
- Précisez la position d'ancrage textuelle, comme center, top ou 50% 50%.
- Lancez la génération pour afficher le fragment de code CSS correspondant.
- Copiez la propriété clip-path générée pour l'insérer directement dans la classe CSS de votre élément.
Exemples
- Découpe circulaire centrée : en choisissant la forme circle avec une taille de 40 et une position à center, vous obtenez la déclaration CSS clip-path: circle(40% at center);.
- Étoile polygonale : en sélectionnant star, l'outil génère un masque polygone complet avec des coordonnées fixes en pourcentages.
FAQ
Comment fonctionne le calcul des dimensions pour une ellipse ?
Pour une ellipse, le premier rayon reprend la valeur indiquée dans le champ de taille, tandis que le second rayon applique automatiquement 60 % de cette même valeur (taille × 0,6), le tout placé à la position définie.
Les paramètres de taille et de position modifient-ils les polygones ?
Non, les formes polygonales prédéfinies comme le triangle, l'hexagone, le pentagone, l'étoile et le losange utilisent des coordonnées vectorielles fixes exprimées en pourcentages.
Que se passe-t-il si un nom de forme non valide est saisi ?
Lorsqu'une valeur de forme non reconnue est fournie, l'outil applique automatiquement le gabarit du cercle avec la taille et la position spécifiées.