Générateur de clip-path CSS

Les cinq fonctions de forme

Clips polygonaux courants

/* Hexagone */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Losange */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / flèche pointant à droite */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallélogramme */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Tranche diagonale (section héroïque moderne) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

La diagonale de la section héroïque est probablement la plus utilisée de toutes, elle donne à une section cet aspect moderne angulaire sans aucun SVG.

Animer le clip-path

Le clip-path s’anime tant que les deux états ont la même fonction de forme avec le même nombre de points. Un polygone à 4 sommets s’anime en douceur vers un autre polygone à 4 sommets ; ajouter ou supprimer des sommets casse l’interpolation.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Utilisez cela pour des effets de révélation, des distorsions subtiles au survol, ou des transitions de page.

Clip-path vs. overflow: hidden

overflow: hidden découpe au rectangle de la border-box (qui peut être arrondi avec border-radius). clip-path découpe à toute forme que vous définissez et découpe tout, y compris les ombres et les contours. Si vous avez besoin que les ombres restent visibles en dehors de la forme, clip-path n’est pas ce que vous voulez.

filter: drop-shadow() peut réajouter une ombre suivant la forme sur les éléments clip-path, mais c’est plus lent.

Performances

Le clip-path est accéléré par le GPU dans les navigateurs modernes, donc les clip-paths animés sont fluides. L’exception est path() et les polygones très complexes (40+ sommets) qui reviennent au rendu CPU sur certains navigateurs.

Accessibilité

Le clip-path ne change que ce qui est visible. Les lecteurs d’écran, le focus au clavier et les événements de pointeur suivent la boîte complète de l’élément, pas la forme découpée. Si une image est découpée en étoile, le texte alternatif est lu normalement. Si un bouton est découpé en chevron, sa cible de clic est le rectangle complet, pas le chevron visible, ce qui peut provoquer des clics accidentels sur un espace apparemment vide.

Pour les boutons avec des formes découpées inhabituelles, définissez la largeur/hauteur de l’élément de manière serrée afin que la zone de clic corresponde raisonnablement bien à la zone visible.