Attribut clip-path CSS

Définition et utilisation

L'attribut clip-path vous permet de couper les éléments en forme de base ou en source SVG.

Remarque :clip-path remplacera l'attribut clip obsolète.

Coupez l'image en cercle de 50% :

img {
  clip-path: circle(50%);
}

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

Valeur	Description
clip-source	Définissez l'URL pointant vers l'élément SVG <clipPath>.
basic-shape	Coupez l'élément pour former une forme de base : cercle, ellipse, polygone ou étoile.
margin-box	Utilisez la boîte de marge (margin box) comme cadre de référence.
border-box	Utilisez la boîte de bord (border box) comme cadre de référence.
padding-box	Utilisez la boîte de marge (padding box) comme cadre de référence.
content-box	Utilisez la boîte de contenu (content box) comme cadre de référence.
fill-box	Utilisez la boîte de l'objet (object bounding box) comme cadre de référence.
stroke-box	Utilisez la boîte de contour (stroke bounding box) comme cadre de référence.
view-box	Utilisez la boîte de vue SVG comme cadre de référence.
none	Valeur par défaut. Aucun chemin de coupe créé.

Valeur par défaut :	none
Héritage :	Non
Réalisation des animations :	Supporté (seulement pour la valeur basic-shape). Voir également :Propriétés liées aux animations.
Version :	Module de masquage CSS Niveau 1
Syntaxe JavaScript :	object.style.clipPath="circle(50%)"

Les numéros dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en totalité.

Chrome	IE / Edge	Firefox	Safari	Opera
55.0 23.0 -webkit-	79.0*	54.0	9.1 6.1 -webkit-	42.0 15.0 -webkit-

Edge ne supporte clip-path uniquement sur les éléments SVG (les éléments HTML ne sont pas supportés).