Générateur CSS Clip Path

Générez interactivement des formes CSS clip-path : polygon, circle et ellipse. Glissez les sommets, choisissez des présets comme arrow ou star, et copiez la valeur CSS clip-path.

Presets

Preview (drag points)

BG:

Vertices (3)

CSS Output

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Comment utiliser Générateur CSS Clip Path

1Choisissez un type de clip-path : polygon, circle ou ellipse.
2Sélectionnez une forme prédéfinie ou glissez les points de contrôle pour créer une forme personnalisée.
3Copiez la valeur CSS clip-path pour l'utiliser dans votre feuille de style.

ZenovayAnalytics

Sachez ce que vos visiteurs font vraiment.

Suivi des visiteurs en temps réel
Vie privée d'abord, sans bandeau cookies
Installé en deux minutes

Découvrir Zenovay

Outils connexes

Générateur de gradient CSS

Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.

Générateur d'Ombre de Boîte CSS

Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.

Générateur de Rayon de Bordure CSS

Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.

Zone de jeu CSS Flexbox

Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.

Questions fréquemment posées

Qu'est-ce que CSS clip-path ?▾

clip-path rogne un élément selon une forme spécifique. Tout ce qui est en dehors de la forme est masqué. Valeurs supportées : polygon(x1 y1, x2 y2, ...) : polygone personnalisé avec des sommets en pourcentages. circle(rayon at cx cy) : cercle. ellipse(rx ry at cx cy) : ellipse. inset(haut droite bas gauche round rayon) : rectangle encadré. path("chemin SVG") : chemin SVG. Exemple : clip-path: polygon(50% 0%, 0% 100%, 100% 100%) crée un triangle. CSS clip-path a remplacé le SVG clipPath déprécié pour la plupart des cas d'utilisation. Support navigateur : tous les navigateurs modernes. Utilisez le préfixe -webkit-clip-path pour Safari < 14.

Quels sont les modèles de formes clip-path courants ?▾

Triangle vers le haut : polygon(50% 0%, 0% 100%, 100% 100%). Triangle vers le bas : polygon(0% 0%, 100% 0%, 50% 100%). Hexagone : polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). Flèche droite : polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%). Étoile : polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%). Pentagone : polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%). Chevron : polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%).

Comment clip-path interagit-il avec border-radius ?▾

clip-path remplace border-radius visuellement — le border-radius existe toujours dans le modèle de boîte mais clip-path masque les coins, rendant border-radius invisible. Si vous voulez des formes arrondies, utilisez : inset(0 round 10px) pour un rectangle arrondi. circle() et ellipse() sont intrinsèquement lisses. Pour les polygones arrondis, utilisez le polygon() de forme de base CSS combiné avec la propriété corner-shape à venir (encore expérimentale). Solution de contournement : appliquez border-radius à un élément enfant dans le conteneur rogné. clip-path et border-radius affectent tous deux les zones de clic/survol.

Peut-on animer CSS clip-path ?▾

Oui ! clip-path supporte les transitions et animations CSS entre formes avec le même nombre de points. Exemple : element { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 0.5s ease; } element:hover { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } Les deux formes doivent avoir le même nombre de sommets de polygone pour une interpolation fluide. Pour les formes avec des nombres de sommets différents, elles s'enchaînent sans interpolation. Conseil : ajoutez des sommets de point médian supplémentaires aux deux formes pour permettre l'interpolation entre des polygones de formes différentes.

Quelle est la différence entre clip-path et mask ?▾

clip-path : utilise une forme géométrique (polygone, cercle, chemin SVG). La zone rognée est complètement masquée. Bords nets. Haute performance (accélérée GPU). mask : utilise une image ou un dégradé. Blanc = visible, noir = masqué, gris = semi-transparent. Permet des bords doux, des dégradés et des masques complexes. mask-image: linear-gradient(to right, transparent, black) crée un effet de fondu. Utilisez clip-path pour les formes géométriques nettes (sections diagonales, triangles, hexagones). Utilisez mask pour les effets doux, les fondus et les masques basés sur des images. Les deux acceptent la même syntaxe de chemin SVG.