Générateur de clip-path CSS

Qu'est-ce que Générateur de clip-path CSS ?

Le générateur de clip-path CSS est un éditeur visuel gratuit pour la propriété CSS clip-path, conçu pour les développeurs front-end et les designers qui veulent découper des éléments en formes non rectangulaires. Choisis un preset dans la liste déroulante : circle() et ellipse() avec un rayon et un point central, polygon() avec autant de sommets que nécessaire, inset() avec quatre décalages de bord, ou une variante inset() arrondie avec un rayon d'angle. Chaque paramètre est un pourcentage saisi dans un champ numérique, et une zone d'aperçu sur fond en damier révèle la forme obtenue en temps réel. Le CSS clip-path complet est généré pour que tu le copies. Sers-t'en pour masquer des images, créer des séparateurs de section en diagonale, construire des avatars hexagonaux ou découper des formes de bulle de dialogue sans compter les coordonnées à la main.

Comment utiliser Générateur de clip-path CSS

1. Choisis une forme dans la liste des presets : cercle, ellipse, polygone, inset ou arrondi.
2. Pour le cercle ou l'ellipse, règle le rayon (ou les rayons X/Y) et la position centrale X/Y en pourcentage.
3. Pour le polygone, modifie le X et le Y de chaque sommet en pourcentage ; clique sur Ajouter un point pour ajouter d'autres sommets et réorganise-les en modifiant les valeurs.
4. Pour l'inset ou l'arrondi, règle les décalages haut, droite, bas et gauche ; l'arrondi prend aussi un rayon d'angle.
5. Regarde l'aperçu en direct rogner la boîte au fil de ta saisie.
6. Copie le CSS clip-path généré et colle-le dans ta feuille de style.

Exemples

Preset cercle, rayon 50%, centre 50% 50%

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

Preset polygone, points (50,0) (100,100) (0,100)

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

Preset arrondi, inset 10% sur tous les côtés, rayon d'angle 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Questions fréquentes

À quoi sert clip-path ?

La propriété CSS clip-path rogne un élément en une forme de base, de sorte que seule la zone à l'intérieur de la forme reste visible. Elle est idéale pour les avatars circulaires, les coupes de section en diagonale, les grilles hexagonales, les masques d'image et les bulles de dialogue, le tout sans images ni fichiers SVG supplémentaires.

Comment fonctionne le preset polygone ?

polygon() dessine une forme en reliant dans l'ordre une liste de sommets X/Y. Modifie les valeurs en pourcentage de chaque point et utilise Ajouter un point pour insérer d'autres sommets ; le dernier point se relie automatiquement au premier. Un minimum de trois points est conservé pour que la forme reste valide.

Pourquoi les valeurs sont-elles en pourcentage ?

Les pourcentages font que le découpage s'adapte à l'élément, ainsi le même clip-path fonctionne à n'importe quelle taille. 0% correspond au bord gauche ou supérieur et 100% au bord droit ou inférieur de la boîte de l'élément.

Qu'ajoute le preset arrondi ?

Le preset arrondi utilise inset() avec un rayon d'angle round, produisant un rectangle rogné vers l'intérieur de chaque côté et doté de coins arrondis — pratique pour des découpes encadrées tout en douceur qu'un simple border-radius ne peut pas combiner avec un découpage inset.

Mes données sont-elles envoyées quelque part ?

Non. Le générateur s'exécute entièrement dans ton navigateur en JavaScript — tes valeurs de forme ne quittent jamais ton appareil, il fonctionne donc en toute confidentialité et même hors ligne une fois la page chargée.