Générateur de clip-path

Ce que fait clip-path

clip-path découpe un élément selon une forme : ce qui reste à l’extérieur n’est pas affiché et ne reçoit pas les clics. Cela fonctionne sur n’importe quel élément, pas seulement les images, et ne modifie pas l’espace qu’il occupe dans la page : le reste de la mise en page ne bouge pas. C’est la façon moderne de faire des avatars hexagonaux, des en-têtes au bord incliné ou des cartes en forme de bulle sans exporter la moindre image.

Les quatre formes de base

• circle(50% at 50% 50%) : rayon et centre. Avec un rayon de 50 % sur une image carrée, on obtient un cercle parfait.
• ellipse(50% 35% at 50% 50%) : deux rayons, horizontal et vertical.
• inset(10% round 8%) : un rectangle rentré depuis chaque côté, avec des coins arrondis en option. Pratique pour rogner des marges sans toucher à l’image.
• polygon(…) : une liste de points x y. En pourcentages, la forme s’adapte à toutes les tailles.

Animer un clip-path

Deux polygones ayant le même nombre de points peuvent s’animer avec transition : le navigateur déplace chaque point vers son homologue. C’est pourquoi les effets de « révélation » partent souvent d’un polygone dont tous les points sont alignés. Si le nombre de points diffère, le changement est instantané.

Conseils

• Les ombres box-shadow sont découpées aussi. Pour une ombre qui suit la forme, utilisez filter: drop-shadow() sur un élément parent.
• Pour des formes courbes, clip-path: path() accepte un tracé SVG, mais en pixels fixes ; les pourcentages de polygon() sont plus pratiques dans une mise en page fluide.
• La photo d’exemple provient de /random, la banque de photos du générateur ximg.es, avec une graine fixe pour qu’elle soit toujours la même : https://ximg.es/random/960x640.jpg?seed=ximg-clip.