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.

Le type de donnée CSS <shape> permet de représenter des formes. Ces formes (ou régions) sont utilisées pour définir les parties d'un élément sur lesquelles des propriétés comme clip s'appliquent. Ce type de donnée a été déprécié pour être remplacé par <basic-shape>.

Note : <shape> et rect() fonctionnent avec la propriété clip qui a été dépréciée pour être remplacée par clip-path. Il est donc préférable d'utiliser cette dernière si possible avec une valeur de type <basic-shape> à la place.

Syntaxe

Les valeurs de type <shape> sont construites grâce à la notation fonctionnelle rect() qui permet de créer une zone en forme de rectangle.

rect(haut, droite, bas, gauche)

Valeurs

rect.png

haut
Une valeur de type <length> qui représente le décalage entre le côté haut du rectangle et le côté haut de la bordure de l'élément.
droite
Une valeur de type <length> qui représente le décalage entre le côté droit du rectangle et le côté gauche de la bordure de l'élément.
bas
Une valeur de type <length> qui représente le décalage entre le côté bas du rectangle et le côté haut de la bordure de l'élément.
gauche
Une valeur de type <length> qui représente le décalage entre le côté gauche du rectangle et le côté gauche de la bordure de l'élément.

Interpolation

Les valeurs de type <shape> sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs haut, droite, bas et gauche comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à la fonction de temporisation associée à l'animation.

Exemples

CSS

.exemple {
   position: absolute;
   top: 0px;
   left: 360px;
   clip: rect(0px, 175px, 113px, 0px); 
}

HTML

<p>
  <img class="exemple" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Rogné en haut à gauche">
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Level 2 (Revision 1)
La définition de '<shape>' dans cette spécification.
Recommendation Définition avec la propriété clip.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 ?15.59.51.3
rect()1 ?15.519.51.3
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? ? ? ? ? ?
rect() ? ? ? ? ? ? ?

1. For Internet Explorer versions 5.5 through 7, the rect() function uses spaces (instead of commas) to separate parameters. For Internet Explorer 8 and later versions, only the standard comma-separated syntax is supported.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,