clip

Obsolète: Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

Attention : Cette propriété est dépréciée, on utilisera clip-path à la place.

La propriété CSS clip définit la portion visible d'un élément. La propriété clip s'applique uniquement aux éléments positionnés de façon absolue (c'est-à-dire qui ont position:absolute ou position:fixed).

css

/* Valeur avec un mot-clé */
clip: auto;

/* Valeur de type <shape> */
clip: rect(1px, 10em, 3rem, 2ch);

/* Valeurs globales */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;

Syntaxe

Valeurs

<shape>

Une forme (type <shape>) rectangulaire avec la structure rect(<haut>, <droit>, <bas>, <gauche>). Les valeurs <haut> et <bas> sont des décalages à partir du bord intérieur haut de la bordure de la boîte, tandis que <droit> et <gauche> sont des décalages à partir du bord intérieur gauche de la bordure de la boîte, c'est-à-dire la délimitation de la zone de remplissage (padding).

Les valeurs <haut>, <droit>, <bas>, et <gauche> peuvent être exprimées avec une longueur (valeur de type <length>) ou auto. Si l'une des valeurs est auto, l'élément est rogné sur le bord intérieur de la bordure du côté correspondant.

auto

L'élément n'est pas rogné (par défaut). Attention, le comportement est différent de celui obtenu avec rect(auto, auto, auto, auto), qui rogne l'élément aux bords intérieurs de la bordure.

Définition formelle

Valeur initiale	`auto`
Applicabilité	éléments positionnés de manière absolue
Héritée	non
Valeur calculée	`auto` si spécifié comme `auto`, sinon un rectangle avec quatre valeurs dont chacune vaut `auto` si elles sont spécifiées comme `auto` sinon, la longueur calculée
Type d'animation	un rectangle

Syntaxe formelle

clip = 
  <rect()>  |
  auto      

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )

Exemples

Rogner une image

CSS

css

.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}

HTML

html

<p class="dotted-border">
  <img src="macarons.png" title="Image originale" />
  <img id="top-left" src="macarons.png" title="Image rognée en haut à gauche" />
  <img id="middle" src="macarons.png" title="Image rognée au centre" />
  <img
    id="bottom-right"
    src="macarons.png"
    title="Image rognée en bas à droite" />
</p>

Résultat

Spécifications

Specification
CSS Masking Module Level 1 # clip-property

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Cette propriété est dépréciée, on utilisera clip-path à la place.
Les propriétés CSS connexes :