Propriété CSS clip

❮ Précédent Suivant ❯

La propriété clip permet le rectangle de couper un élément positionné. Le rectangle est spécifié comme en tant que quatres coordonnées: top, right, bottom, left. Les valeurs top et bottom spécifient des décalages depuis le bord intérieur supérieur de la boîte, tandis que les valeurs de right et left spécifient des décalages depuis le bord intérieur droit de la boîte. Tous les quatres côtés peuvent être length ou auto. "Auto" est la valeur initiale.

Valeur initiale	auto
Appliquée à	Les éléments de la position "absolute".
Héritée	Non.
Animable	Oui. Background-color est animable.
Version	CSS2
Syntaxe DOM	object.style.clip = "rect(10px,40px,40px,10px)";

Syntaxe

clip: auto | shape | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      position: absolute;
      clip: auto;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

Essayez-vous-même!

Dans l'exemple suivant, le rectangle coupe l'image par rapport aux valeurs définies.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      position: absolute;
      clip: rect(0px,70px,200px,0px);
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Ne coupe pas un élément. C'est la valeur initiale.
shape	Coupe un élément. La seule valeur valide est : rect (top, right, bottom, left).
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.