Générateur CSS Clip-Path - Formes Polygone, Cercle et Ellipse Gratuit
Générez des valeurs CSS clip-path pour des formes de polygone, cercle et ellipse avec aperçu en direct et formes prédéfinies
Outils CSS
Tool
Shape Type
Preset Shapes
CSS
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Comment utiliser
1Choisissez un type de forme : polygone, cercle ou ellipse
2Pour les polygones, cliquez sur une forme prédéfinie (triangle, pentagone, hexagone, étoile, flèche, croix)
3Pour cercle/ellipse, ajustez les curseurs de rayon
4Visualisez l'aperçu en direct avec le découpage appliqué à un élément en dégradé
5Copiez la valeur CSS clip-path et ajoutez-la à votre élément
Questions fréquentes
clip-path est une propriété CSS qui découpe (masque) les parties d'un élément situées en dehors de la forme définie. Elle prend en charge les formes polygone, cercle, ellipse et chemin SVG.
Oui. Toutes les valeurs en pourcentage dans polygon() sont relatives à la boîte englobante de l'élément, de sorte que la forme s'adapte automatiquement à la taille de l'élément.
Oui, à condition que les deux images clés utilisent le même type de forme et le même nombre de points de polygone. Les transitions et animations CSS peuvent interpoler en douceur entre deux valeurs clip-path.
clip-path est bien pris en charge par tous les navigateurs modernes. Pour les navigateurs plus anciens, le préfixe -webkit- peut être nécessaire pour les versions de Safari antérieures à la 13.