Générateur de clip-path CSS
Choisissez une forme et faites glisser les points dans l’aperçu pour ajuster. Le code clip-path en pourcentage fonctionne quelle que soit la taille de l’élément.
Mode d’emploiDécoupe en formes avec clip-path
Disponible en: 
Générateur de clip-path CSS: à quoi ça sert
Choisissez l’une des formes prêtes à l’emploi (triangle, losange, hexagone, pentagone, étoile, flèche, bulle, coins coupés, parallélogramme, cercle ou ellipse) et faites glisser les points dans l’aperçu pour ajuster. Les coordonnées sont en pourcentage, la découpe fonctionne donc quelle que soit la taille.
Testez avec votre photo et copiez la ligne de clip-path prête à l’emploi.
Mode d’emploi
- Choisissez une forme.
- Faites glisser les points pour ajuster et testez avec une photo.
- Copiez le clip-path et utilisez-le dans le CSS.
Quand l’utiliser
- Photos aux formes différentes sur des sites.
- Sections aux coins inclinés.
- Badges, flèches et bulles uniquement en CSS.
Questions fréquentes
Qu’est-ce que clip-path ?
C’est une propriété CSS qui n’affiche que la partie d’un élément située à l’intérieur d’une forme. L’image reste entière dans le fichier ; seul ce qui est hors de la forme est masqué.
Cela fonctionne-t-il dans tous les navigateurs ?
Oui. polygon(), circle() et ellipse() fonctionnent dans tous les navigateurs actuels, sans préfixe.
Peut-on l’animer ?
Oui, entre deux polygon() ayant le même nombre de points, avec transition ou animation sur clip-path. Les points se déplacent en douceur d’une forme à l’autre.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.