clip

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut 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

Voir aussi

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

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨1 janv. 1970⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content