Découper une photo de profil en cercle parfait, donner à une bannière un bord en diagonale plutôt qu'une ligne droite, ou révéler progressivement une image selon une forme personnalisée : tous ces effets, impossibles à obtenir avec un simple border-radius, deviennent triviaux avec clip-path.
Son principe est simple à retenir : clip-path ne change ni la taille ni la position de l'élément dans la page, elle décide seulement quelle portion de cet élément reste visible, en masquant tout le reste sans le supprimer ni modifier le Modèle de boîte sous-jacent.
Définition
clip-path découpe la zone visible d'un élément selon une forme géométrique définie en CSS, un cercle, une ellipse, un polygone, ou même le tracé d'un fichier SVG externe. Tout ce qui dépasse de cette forme reste présent dans le document, avec sa taille et sa position inchangées, mais devient simplement invisible.
.avatar {
width: 120px;
height: 120px;
clip-path: circle(50%);
}Les formes disponibles
| Fonction | Forme obtenue |
|---|---|
circle(rayon) | Un cercle |
ellipse(rx ry) | Une ellipse |
polygon(points) | Un polygone à angles multiples |
inset(marges) | Un rectangle décalé vers l'intérieur |
Un exemple concret : une bannière en diagonale
polygon() permet de dessiner des formes bien plus élaborées qu'un simple cercle, en indiquant une liste de points, chacun avec ses coordonnées horizontale et verticale, reliés entre eux dans l'ordre d'écriture pour former le contour de la forme visible.
.banniere {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}Ces quatre points dessinent un rectangle dont le bord inférieur descend en diagonale, du coin bas droit au coin bas gauche, un effet graphique populaire sur les bannières et les sections de page, impossible à obtenir avec des bordures ou des coins arrondis classiques.
Des générateurs visuels en ligne permettent de dessiner un polygon() à la souris et d'obtenir directement les coordonnées correspondantes, ce qui évite de calculer chaque point à la main pour une forme un peu complexe.
clip-path ne touche ni au flux ni à la zone cliquable
Un détail surprend souvent la première fois : ce qui est masqué visuellement par clip-path reste malgré tout présent dans le document. L'espace réservé par l'élément dans le flux ne rétrécit pas pour épouser la nouvelle forme visible, et selon les navigateurs, la zone qui reçoit encore les clics peut correspondre à l'ancienne boîte rectangulaire plutôt qu'à la forme découpée.
clip-path peut lui-même être animé avec une transform ou une transition, à condition d'écrire deux valeurs de forme comparables, avec le même nombre de points pour un polygon(). Passer d'un cercle à un carré, par exemple, ne s'anime pas en douceur si le nombre de points diffère entre les deux formes.clip-path ou mask-css : quelle différence
clip-path se limite à des formes géométriques nettes, aux bords francs, sans dégradé de transparence possible sur le contour. Pour des découpes plus subtiles, avec des bords progressifs ou basées sur les nuances de gris d'une image, mask devient l'outil plus adapté, au prix d'une syntaxe légèrement plus complexe.
Questions fréquentes
clip-path fonctionne-t-il sur une image de fond plutôt que sur un élément entier ?clip-path s'applique à la boîte complète de l'élément, image comprise si elle occupe tout l'espace, mais pas spécifiquement à une image de fond posée avec background-image : pour découper uniquement le fond, il faut généralement recourir à mask-css à la place.
Oui, clip-path accepte une référence vers un élément clipPath défini dans un fichier SVG, ce qui permet des découpes bien plus élaborées qu'un cercle ou un polygone, comme un logo ou un tracé irrégulier dessiné à la main dans un logiciel vectoriel.
clip-path est-il quand même lu par les lecteurs d'écran ?Oui, dans la plupart des cas, clip-path ne retire rien du document, ce qui signifie que le contenu masqué visuellement reste accessible aux technologies d'assistance, contrairement à display: none, qui retire réellement l'élément de l'expérience pour tout le monde.