Générateur de Formes CSS clip-path

Comment ça marche

Saisissez la couleur de remplissage dans le panneau de gauche — HEX, RGB et HSL sont reconnus — puis touchez ou cliquez une forme dans la liste ; le code et l'aperçu se renouvellent à chaque changement. L'hexagone, par exemple, produit polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) : six points d'angle, exprimés en pourcentage de la boîte. Les coordonnées étant des pourcentages, le même code dessine la même forme sur un badge de 40 pixels comme sur une bannière de 400 pixels ; la ligne aspect-ratio: 1 / 1 garde la boîte carrée, sans elle la forme s'étire avec la boîte. Copiez le code dans votre propre sélecteur ; la ligne background n'est qu'un remplissage de démonstration — pour découper votre propre image, supprimez-la et posez la ligne clip-path directement sur la balise img. Le bouton Télécharger enregistre l'aperçu en PNG de 1200×800 pixels.

Cet outil est aussi connu sous le nom de clip path polygon, formes css, hexagone en css, clip path cercle.

Qu'est-ce que clip-path ?

clip-path est la propriété CSS qui décide quelle région d'un élément est peinte : l'intérieur du chemin défini reste visible, tout l'extérieur devient entièrement transparent. Le chemin s'écrit de quatre façons — polygon() avec une liste d'angles, circle() et ellipse() avec des courbes, inset() avec un rectangle rentré. Le découpage ne touche que le rendu ; la position, la taille et le contenu de l'élément restent intacts. Couper des coins de photo, fabriquer badges et rubans, encadrer une image dans une forme géométrique : voilà ses emplois les plus courants, le tout en une ligne de CSS et sans retoucher l'image.

Qu'est-ce que Coordonnées de polygon() ?

polygon() est la notation clip-path qui définit une forme par ses points d'angle : chaque point est une paire « distance depuis la gauche, distance depuis le haut », séparée par des virgules. Les valeurs s'écrivent le plus souvent en pourcentages, car les pourcentages suivent la boîte — le même code d'étoile fonctionne sur une petite icône comme sur une bannière pleine largeur ; en pixels, la forme garde une taille fixe et reste coincée dans un coin quand la boîte grandit. Les points sont reliés à la suite ; dans le mauvais ordre, les bords se croisent et la forme éclate en fragments inattendus.

Quelle est la différence entre clip-path et overflow: hidden ?

overflow: hidden ne rogne qu'en rectangle : le contenu qui déborde de la boîte est masqué, mais la silhouette de la boîte ne dépassera jamais le rectangle aux coins arrondis. clip-path découpe la boîte le long du chemin géométrique de votre choix — étoile, hexagone, flèche, polygone libre — en façonnant l'élément lui-même plutôt qu'en cachant un débordement. Les deux répondent à des questions différentes : pour « masquer ce qui déborde », overflow suffit et coûte moins ; pour « cet élément ne doit pas être un rectangle », clip-path est la seule voie. Ils se combinent aussi : overflow à l'extérieur pour contrôler le défilement, clip-path à l'intérieur pour la forme.

Le piège du découpage : la zone invisible occupe toujours sa place

clip-path ne rogne que le rendu, il ne rétrécit pas la boîte : un élément découpé en triangle occupe toujours son rectangle complet dans la mise en page, et les éléments voisins ne viennent pas remplir les coins apparemment vides. La zone cliquable, elle, suit la forme découpée dans la plupart des navigateurs — un clic sur le coin invisible ne fait rien ; c'est le comportement défini de la propriété, pas un bogue.

La deuxième surprise fréquente est l'ombre : box-shadow se dessine autour du rectangle de la boîte et le découpage la coupe aussi, une forme découpée n'affiche donc aucune ombre. S'il vous en faut une, remplacez box-shadow par filter: drop-shadow() ; drop-shadow suit la forme peinte et projette l'ombre le long du vrai bord de l'étoile.

Lire les pourcentages et remodeler le résultat

Chaque paire dans polygon() est un point d'angle : le premier nombre est la distance depuis la gauche, le second depuis le haut, et 0% comme 100% sont les bords de la boîte. Les points sont reliés par des lignes dans l'ordre écrit, le dernier se referme sur le premier. Prenez le code généré comme point de départ : rapprochez les coins supérieurs du trapèze et il tend vers le triangle, écartez-les et il tend vers le rectangle.

L'animation entre deux formes passe aussi par ces coordonnées : transition: clip-path ne fond deux valeurs polygon() l'une dans l'autre que si les nombres de points coïncident. C'est pourquoi l'octogone et le cadre à coins biseautés de cet outil (8 points chacun) se transforment proprement l'un en l'autre, alors que le passage de l'hexagone à l'étoile saute sans transition.

Questions fréquentes

Puis-je mettre une photo dans la forme découpée ?

Oui — c'est le métier principal de clip-path : le code s'applique à n'importe quel élément, et sur une balise img c'est la photo elle-même qui est découpée. La ligne background du code généré n'est qu'un remplissage de démonstration ; sur votre image, supprimez-la et déplacez la ligne clip-path sur l'élément image. Emportez aussi la ligne aspect-ratio, sinon la forme se déforme avec les proportions de l'image.

Pourquoi le cercle et l'ellipse n'utilisent-ils pas polygon() ?

Un bord courbe ne peut être qu'approché par des points d'angle ; il en faudrait des dizaines et le bord resterait facetté. clip-path a des notations dédiées : circle(50% at 50% 50%) définit par centre et rayon, ellipse(50% 35% at 50% 50%) par deux rayons. Les deux sont des courbes mathématiques, lisses à toute taille ; cet outil choisit automatiquement la bonne notation pour ces deux formes.

Que se passe-t-il dans les navigateurs sans prise en charge de clip-path ?

Un navigateur très ancien qui ne connaît pas clip-path l'ignore simplement : l'élément s'affiche non découpé, en rectangle complet — aucun contenu n'est perdu, seule la forme décorative disparaît. Les versions actuelles de Chrome, Firefox, Safari et Edge prennent en charge polygon, circle et ellipse sans préfixe ; seules des versions de Safari non mises à jour depuis des années exigent encore -webkit-clip-path.

Puis-je tracer une bordure (border) le long du bord de la forme ?

Pas directement : border appartient au rectangle de la boîte, et le découpage la coupe avec le reste ; il n'en subsiste que les fragments tombés dans la forme. La solution habituelle tient en deux couches : donnez au parent la forme et la couleur de bordure, puis imbriquez un second élément portant le même clip-path réduit de quelques pourcents ; la bande restée entre les deux se lit comme une bordure.