W3docs
fr
Se connecter

Propriété clip CSS

The CSS clip property applies only to absolutely positioned elements, that are elements with position: absolute or position: fixed.Try Examples.

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 initialeauto
S'applique àÉléments positionnés de manière absolue.
HéritéeNon.
AnimableNon.
VersionCSS2
Syntaxe DOMobject.style.clip = "rect(10px,40px,40px,10px)";

Syntaxe

Syntaxe de la propriété clip CSS

clip: auto | shape | initial | inherit;

Exemple de la propriété clip :

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

<!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>
Essayez vous-même »

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

<!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>
Essayez vous-même »

Valeurs

ValeurDescriptionTester »
autoNe découpe pas un élément. Il s'agit de la valeur par défaut.Tester »
shapeDécoupe un élément. La seule valeur valide est rect(top, right, bottom, left).Tester »
initialDéfinit la valeur par défaut de la propriété.Tester »
inheritHérite la propriété de son élément parent.

Pratique

Pratique

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