cClaude.rocks ☕ Le blog

[Nouvelles technologies du libre, sciences et coups de gueule…]

Menu
😤 Ce billet a été édité le : 2019-07-17

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.

Exemple

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

<img src="image.png" />
Exemple clip-path attribute

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

ᦿ


ℹ 2006 - 2024 | 🏠 Accueil du domaine | 🏡 Accueil du blog