Propriété clip CSS

La propriété clip permet de découper un élément positionné à l'aide d'un rectangle. Le rectangle est spécifié par quatre coordonnées : top, right, bottom, left. Ces valeurs définissent des décalages par rapport au bord interne (padding) de l'élément. L'ordre rect(top, right, bottom, left) suit un sens horaire en partant du haut. Les quatre côtés peuvent être soit une longueur, soit auto. auto est la valeur par défaut.

La propriété clip ne fonctionne pas si la valeur de la propriété overflow est définie sur visible.

INFO

Si possible, utilisez plutôt la propriété plus récente clip-path, car la propriété clip est obsolète et retirée de la spécification CSS. Pour les navigateurs modernes, utilisez clip-path: inset(top right bottom left) ou clip-path: rect(...) comme remplacement direct.

Valeur initiale	auto
S'applique à	Éléments positionnés de manière absolue.
Héritée	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.clip = "rect(10px,40px,40px,10px)";

Syntaxe

Syntaxe de la propriété clip CSS

css

clip: auto | shape | initial | inherit;

Exemple de la propriété clip :

Exemple de la propriété clip CSS avec la valeur auto

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        clip: auto;
      }
    </style>
  </head>
  <body>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com" />
  </body>
</html>

Try it Yourself »

Résultat

Propriété clip CSS

Dans l'exemple suivant, le rectangle découpe l'image en fonction des valeurs définies.

Exemple de la propriété clip avec la valeur "rect" :

Exemple de la propriété clip CSS avec la valeur shape

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        clip: rect(0px, 70px, 200px, 0px);
      }
    </style>
  </head>
  <body>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com logo" />
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester »
auto	Ne découpe pas un élément. Il s'agit de la valeur par défaut.	Tester »
shape	Découpe un élément. La seule valeur valide est `rect(top, right, bottom, left)`.	Tester »
initial	Définit la valeur par défaut de la propriété.	Tester »
inherit	Hérite la propriété de son élément parent.

Pratique

Quelle est la fonction de la propriété 'clip' en CSS ?

Elle empêche un élément de prendre de la place sur la page.Elle permet de masquer des parties d'éléments.Elle change la couleur d'un élément.Elle spécifie une zone rectangulaire pour découper un élément positionné de manière absolue.Elle applique une bordure à un élément.

Propriété clip CSS ​

Syntaxe ​

Exemple de la propriété clip : ​

Résultat ​

Exemple de la propriété clip avec la valeur "rect" : ​

Valeurs ​

Pratique ​

Propriété clip CSS

Syntaxe

Exemple de la propriété clip :

Résultat

Exemple de la propriété clip avec la valeur "rect" :

Valeurs

Pratique