Générateur de Clip Path CSS

Générez des formes CSS clip-path visuellement. Choisissez parmi les modèles ou personnalisez les vôtres — cercle, ellipse, polygone, inset. Copiez du CSS prêt à l'emploi instantanément. 100% gratuit et côté client.

Rayon 50%

Position X 50%

Position Y 50%

Aperçu

Clip Path Preview

Code CSS

clip-path: circle(50% at 50% 50%);

À Propos du Générateur de Clip Path CSS

Le Générateur de Clip Path CSS est un outil visuel pour créer des formes personnalisées en utilisant la propriété CSS clip-path. Au lieu d'écrire manuellement des coordonnées de polygone complexes, vous pouvez sélectionner parmi une variété de formes prédéfinies et personnaliser leurs paramètres en temps réel. La propriété clip-path vous permet de découper un élément en une forme de base ou un polygone, parfait pour créer des mises en page uniques, des masques d'image et des designs web créatifs. Tout le traitement se fait dans votre navigateur — aucune donnée n'est envoyée.

Fonctionnalités

13 formes prédéfinies incluant cercle, ellipse, inset et polygones
Aperçu visuel en temps réel avec rendu de formes
Paramètres ajustables pour le rayon du cercle, les axes de l'ellipse et les offsets de l'inset
Formes de polygone prédéfinies : triangle, hexagone, étoile, flèche et plus
Sortie CSS prête à copier pour une utilisation instantanée dans vos projets
100% côté client — zéro transmission de données

Questions Fréquemment Posées

Qu'est-ce que CSS clip-path ?

La propriété CSS clip-path crée une région de découpage qui définit quelle partie d'un élément doit être affichée. Les parties à l'intérieur de la région sont affichées, tandis que les parties à l'extérieur sont masquées. Elle peut utiliser des formes de base comme circle() et ellipse(), la fonction inset() pour les rectangles avec coins arrondis, ou polygon() pour des formes personnalisées à plusieurs points.

Est-ce que clip-path fonctionne dans tous les navigateurs ?

clip-path avec les formes de base (cercle, ellipse, inset, polygone) est pris en charge dans tous les navigateurs modernes incluant Chrome, Firefox, Safari et Edge. Pour les navigateurs plus anciens, vous devrez peut-être fournir une mise en page alternative. Le préfixe -webkit- n'est plus nécessaire pour les versions actuelles de navigateurs.

Puis-je utiliser clip-path sur des images ?

Oui. clip-path peut être appliqué à n'importe quel élément HTML incluant des images, des divs, des vidéos et des iframes. Il est couramment utilisé pour créer des photos de profil circulaires, des galeries d'images hexagonales, des séparateurs de section diagonaux et d'autres designs créatifs.

Quelle est la différence entre clip-path et border-radius ?

border-radius arrondit uniquement les coins d'un élément rectangulaire, le gardant fondamentalement un rectangle. clip-path peut créer n'importe quelle forme arbitraire incluant des triangles, des étoiles et des polygones personnalisés en masquant complètement des parties de l'élément. Pour des formes complexes au-delà des rectangles arrondis, clip-path est l'outil approprié.