Générateur de clip-path CSS
Découpez une image ou un bloc en forme de polygone, cercle ou rectangle arrondi avec clip-path. Déplacez les points à la souris et copiez le code CSS.
- Gratuit
- Sans inscription
- Aucun fichier envoyé
- Windows, Mac, Android, iPhone
Chargement de l'outil…
À propos de cet outil
Dessinez la forme de découpe de vos images et blocs : 15 formes toutes prêtes (triangle, hexagone, étoile, flèche, bulle…), des points déplaçables à la souris ou au clavier, et les modes cercle et rectangle arrondi. Essayez la forme sur votre photo et copiez le code CSS.
Dans quels cas l'utiliser ?
Photos de profil et vignettes originales
Hexagones, losanges ou étoiles donnent une identité visuelle à une page d'équipe ou à une galerie, sans retoucher chaque image.
Sections en biais
Un polygone à quatre points incliné sur le bas d'un bandeau crée une transition dynamique entre deux sections.
Badges et étiquettes
Flèches, chevrons et bulles se construisent en CSS pur, sans image ni SVG.
Mode d'emploi
- Choisissez une forme toute prête ou un mode (polygone, cercle, rectangle).
- Déplacez les points sur l'aperçu, ajoutez-en ou retirez-en.
- Copiez le code clip-path.
Comment ça marche
Chaque point est enregistré en pourcentage de la largeur et de la hauteur de l'élément, avec une décimale. L'éditeur affiche les points par-dessus l'aperçu ; les déplacer met à jour la valeur polygon() en direct.
Les polygones réguliers et les étoiles sont calculés par trigonométrie (points répartis sur un cercle). Le code produit inclut la version -webkit- pour les anciens navigateurs Safari.
Conseils pour un bon résultat
- Gardez les points dans l'ordre du contour, sinon la forme se croise sur elle-même.
- Pour animer entre deux formes, utilisez le même nombre de points dans les deux.
- Une ombre (box-shadow) est découpée elle aussi : utilisez filter: drop-shadow() sur un parent à la place.
- Testez la forme sur votre vraie photo : un visage peut être coupé par une pointe.
Problèmes fréquents et solutions
L'ombre de l'élément a disparu
clip-path découpe aussi l'ombre. Placez l'élément dans un parent et appliquez filter: drop-shadow() au parent.
La forme se croise
Les points ne sont pas dans l'ordre du contour. Retirez le point fautif et ajoutez-le au bon endroit.
Les clics passent à côté
Les zones découpées ne réagissent plus aux clics : c'est voulu, seule la partie visible est cliquable.
Questions fréquentes
À quoi sert clip-path ?
La propriété découpe un élément selon une forme : tout ce qui est en dehors devient invisible. Elle sert à créer des images hexagonales, des bandeaux en biais ou des badges sans retoucher les images.
Quelles formes sont possibles ?
polygon() pour toute forme à angles droits ou pointus, circle() et ellipse() pour les formes rondes, inset() pour un rectangle avec marges et coins arrondis.
La forme s'adapte-t-elle à la taille de l'élément ?
Oui : les points sont en pourcentages, la forme suit la taille de l'image ou du bloc.
Peut-on animer un clip-path ?
Oui, entre deux polygones qui ont le même nombre de points : CSS interpole la position de chaque point.
Recherches associées
Toujours bloqué ?
Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.