Générateur de Clip Path
Concevez visuellement des clip-paths CSS complexes.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);- Cliquez et faites glisser pour remodeler
- Utilisez les préréglages pour des formes rapides
- Essayez le mode 'polygon' pour des formes personnalisées
Outils recommandés
Utilitaires sélectionnés qui pourraient vous être utiles
Découper des formes sur mesure avec CSS clip-path
Aperçu
La propriété CSS clip-path permet de rogner un élément en une forme sur mesure — triangle, hexagone, flèche, blob ou n'importe quel polygone — sans retoucher d'images. C'est un moyen puissant d'ajouter du design non rectangulaire sans fichiers supplémentaires. Comme écrire les coordonnées à la main est pénible, ce générateur de clip-path vous laisse glisser des points visuellement et copie le CSS exact, le tout dans votre navigateur.
Comment utiliser (étape par étape)
- 1
Choisissez ou dessinez une forme
Partez d'un préréglage (triangle, hexagone, cercle) ou placez des points pour définir un polygone sur mesure.
- 2
Glissez les points
Déplacez les coins dans l'aperçu en direct jusqu'à ce que la forme convienne.
- 3
Copiez le CSS clip-path
Collez la valeur clip-path générée sur votre élément pour le rogner à cette forme.
Comment ça marche
Vous choisissez ou dessinez une forme, et l'outil la définit avec clip-path — en général un polygon() de coordonnées en pourcentage, ou un préréglage comme circle() ou ellipse(). Tout ce qui est hors de la forme devient transparent, l'élément ne s'affiche donc que dans le contour. Vous glissez les points dans un aperçu en direct et l'outil écrit la valeur clip-path correspondante à coller sur n'importe quel élément.
Quand l'utiliser
Rogner une image ou une section en forme anguleuse ou géométrique. Créer un séparateur diagonal entre sections de page. Faire un avatar ou badge hexagonal. Ajouter une flèche ou une forme de bulle à une accroche. Concevoir un hero ou une carte non rectangulaire. Apprendre comment les coordonnées d'un polygone correspondent à une forme visible.
Questions Fréquentes
Elle est rognée — rendue totalement transparente et non interactive, les clics la traversent donc. L'élément ne s'affiche et ne réagit que dans le contour de la forme ; la boîte de mise en page sous-jacente occupe toujours son espace d'origine.
Notes Importantes
clip-path rogne visuellement, mais la boîte de l'élément occupe toujours tout son espace rectangulaire dans la mise en page, ce qui peut causer des chevauchements ou des surprises d'espacement. De plus, le contenu rogné est masqué, pas supprimé — ne comptez pas dessus pour cacher des informations sensibles.