cClaude.rocks ☕ Le blog

Un attribut CSS rigolo : clip-path

L’attribut clip-path permet d’appliquer un détourage à un élément.

Typiquement cela permet d’avoir un masque sur une image et donc de lui appliquer un contour irrégulier.

Cependant la syntaxe de cet attribut CSS clip-path utilise une description de chemin similaire au chemin du format SVG et donc pas nécessairement simple à appréhender lorsque l’on est pas un champion du dessin vectoriel.

Voici un éditeur de clip-path en ligne qui peut vous rendre service lors de la création de vos CSS.

On part d’une image avec le code simpliste suivant.

<img src="image.png" />

Code enligne dans le HTML

<img src="image.png" alt="Exemple clip-path attribute" style="
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 75%, 53% 76%, 59% 100%, 26% 75%, 0% 75%);
clip-path: polygon(0 10%, 100% 10%, 100% 75%, 53% 76%, 59% 100%, 26% 75%, 0% 75%);
width: 300px;
height: 200px;"/>

Code dans le CSS

img {
  -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 75%, 53% 76%, 59% 100%, 26% 75%, 0% 75%);
  clip-path: polygon(0 10%, 100% 10%, 100% 75%, 53% 76%, 59% 100%, 26% 75%, 0% 75%);
}

La propriété clip-path vous permet de créer des formes complexes en CSS en découpant un élément en une forme de base (cercle, ellipse, polygone ou encadré) ou en une source SVG.

Les animations et transitions CSS sont possibles entre deux formes ou plus. Cependant ces formes doivent avoir des chemins avec le même nombre de sommets.

Documentation

• https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

ᦿ