Qu'est-ce que clip-path et quand l'utiliser ?
clip-path est une propriété CSS qui découpe un élément selon une forme donnée. Définissez `clip-path: polygon(50% 0, 100% 100%, 0 100%)` et une simple div devient un triangle. Tout ce qui sort de la forme disparaît.
Vous trouvez ici des presets prêts à l'emploi (triangle, hexagone, octogone, étoile, flèche, bulle de message, éclair) plus un éditeur interactif. Cliquez dans la zone pour ajouter un point, faites glisser un point pour le déplacer, double-cliquez pour le retirer. Le cercle et l'ellipse ont leurs propres presets avec deux poignées de glissement.
La sortie est une ligne CSS `clip-path: ...` prête à copier que vous collez dans votre feuille de style.
Mode d'emploi
- Choisissez un preset dans la colonne de droite (triangle, étoile, flèche, bulle). Chacun fournit des sommets prêts à ajuster.
- Faites glisser n'importe quel point blanc pour le déplacer. Les positions sont en pourcentages (0-100 %), donc la forme s'adapte à l'élément.
- Cliquez dans une zone vide pour ajouter un nouveau sommet (mode polygone uniquement). Utile pour les formes personnalisées avancées.
- Double-cliquez sur un sommet pour le retirer. Minimum 3 sommets (triangle).
- Copiez le CSS résultant et collez-le dans le style de votre élément.
Quand ça aide
clip-path est un outil standard du webdesign moderne depuis 2018 (supporté partout). Au lieu d'exporter une image pour chaque forme inhabituelle, vous le faites purement en CSS :
- Séparateur de section en diagonale (une ligne inclinée qui coupe entre les sections). Un élément classique des portfolios et des landing pages SaaS.
- Hero avec une photo découpée hors d'un rectangle. Un hexagone à la place d'un rectangle est un accroche-regard puissant.
- Avatars hexagonaux (Discord et Slack ont quelque chose de similaire).
- Carte promo en forme de tag (éclair, flèche). Plus accrocheuse qu'un rectangle.
- Bulle de message de chat sans dessiner la pointe via un pseudo-élément ::after.
- Animation reveal : `transition: clip-path 0.5s`, d'une petite valeur à une grande, donne un effet wipe-in.
- Carte au coin coupé : classique dans les UI sci-fi.
Pour ajouter une ombre sous une forme découpée, utilisez `filter: drop-shadow()` (box-shadow ne suit pas clip-path). Pour des formes organiques plus douces, voir le générateur border-radius.