Générateur de clip-path CSS
Partez d'une forme prédéfinie ou déplacez directement les points du polygone pour créer votre propre découpe, et récupérez le code CSS clip-path correspondant, avec aperçu en direct. Tout se passe dans votre navigateur, rien n'est envoyé à un serveur.
Faites glisser les points blancs sur l'aperçu pour ajuster la forme, ou ajoutez/supprimez des points ci-dessous.
Comment ça marche
La propriété CSS clip-path découpe un élément selon une forme définie par une liste de points, exprimés en pourcentage de la largeur et de la hauteur de l'élément. Cet outil propose des formes courantes prêtes à l'emploi (triangle, hexagone, ruban, étoile...) et permet aussi de déplacer chaque point à la souris ou au doigt pour dessiner une découpe entièrement personnalisée.
Pourquoi les coordonnées sont-elles exprimées en pourcentage ?
Utiliser des pourcentages plutôt que des pixels rend la forme découpée responsive : elle s'adapte automatiquement à la taille réelle de l'élément sur lequel elle est appliquée, contrairement à des valeurs fixes qui déformeraient la découpe sur un écran différent.
Le clip-path fonctionne-t-il sur toutes les images et vidéos ?
Oui, clip-path s'applique à la plupart des éléments HTML, y compris les images, vidéos, boutons et conteneurs, dans tous les navigateurs modernes ; pensez toutefois à garder une marge de sécurité dans votre mise en page, car le contenu situé hors de la forme découpée devient invisible mais continue d'occuper sa place initiale.
Traitement 100% local : le tracé du polygone et le code généré restent entièrement dans votre navigateur.