Générateur de Clip Path
Découpez les éléments en flèches, étoiles, hexagones ou vos propres polygones : déplacez les points sur le canvas et copiez le code clip-path.
Glissez les points pour remodeler · double-clic sur le canvas pour ajouter un point
Comment utiliser le générateur de Clip Path
- Choisissez une forme prédéfinie, ou commencez par déplacer les points du pentagone par défaut.
- Double-cliquez n'importe où sur le canvas pour insérer un nouveau point sur le bord le plus proche.
- Sélectionnez un point et appuyez sur « Supprimer le point » pour le retirer (minimum 3 points).
- Passez au mode cercle, ellipse ou inset pour des formes paramétriques avec coins arrondis.
- Copiez la déclaration clip-path — les pourcentages gardent la forme responsive à toute taille.
À propos de ce générateur de Clip Path
La propriété CSS clip-path découpe un élément selon une forme de base — polygone, cercle, ellipse ou inset — en masquant tout ce qui est à l'extérieur. C'est la méthode standard pour construire des mises en page non rectangulaires : séparateurs de section inclinés, grilles d'images hexagonales, flèches, bulles de dialogue et notations en étoiles, le tout sans images ni SVG.
Cet éditeur vous permet de concevoir des formes visuellement : déplacez les sommets du polygone sur le canvas, double-cliquez pour ajouter des points, ou partez de 15 préréglages réglés à la main. Toutes les coordonnées sont en pourcentages, vos formes s'adaptent donc à l'élément. La sortie inclut le préfixe -webkit-clip-path pour les anciennes versions de Safari, et une classe Tailwind à valeur arbitraire pour les projets utility-first.
FAQ Clip Path
Comment ajouter ou supprimer des points du polygone ?
Double-cliquez n'importe où sur le canvas : un nouveau point est inséré sur le bord le plus proche à cet endroit. Pour supprimer un point, cliquez dessus pour le sélectionner (il devient rouge) et appuyez sur « Supprimer le point ». Un polygone conserve toujours au moins 3 points.
Quel système de coordonnées clip-path polygon utilise-t-il ?
Chaque point est une paire x/y mesurée depuis le coin supérieur gauche de l'élément. Ce générateur utilise des pourcentages : 0% 0% est le coin supérieur gauche et 100% 100% le coin inférieur droit. Les coordonnées en pourcentage s'adaptent automatiquement à l'élément, gardant votre forme responsive.
Puis-je animer un clip-path ?
Oui — clip-path est animable en CSS tant que les formes de départ et d'arrivée sont du même type avec le même nombre de points (pour les polygones). Concevez vos deux états ici, gardez le même nombre de points, et transitionnez entre eux avec transition: clip-path .3s.
clip-path affecte-t-il les éléments enfants et l'overflow ?
clip-path découpe tout l'élément, y compris ses enfants, ses bordures et même son box-shadow : tout ce qui est hors de la forme est masqué et non cliquable. Si vous avez besoin d'une ombre autour d'une forme découpée, appliquez plutôt drop-shadow() comme filtre sur un élément parent.
Quelle est la différence entre clip-path et SVG clipPath ?
Les formes de base de clip-path CSS (polygone, cercle, ellipse, inset) couvrent la plupart des besoins de mise en page avec une seule ligne de code et sont animables. SVG clipPath prend en charge des tracés complexes avec des courbes — utilisez les formes CSS pour les designs géométriques (cet outil), et SVG quand vous avez besoin de courbes de Bézier.