Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction rect()

Description de la fonction rect().

Attention ! Cette fonction est obsolète. Elle est avantageusement remplacée par la fonction polygon() combinée à la propriété clip-path.

La fonction rect() définit un rectangle, qui pourra être utilisé avec la propriété clip pour découper un élément.

La fonction rect() peut être utilisée avec :

  • clip : Définit la partie visible de l'élément (découpage).

Syntaxe de la fonction rect().

  • clip: rect(5px, 10px, 20px, 0px); h d b g

    h, d, b et g sont quatre valeurs numériques positives ou nulle, suivies d'une unité de dimension (voir les unités de dimensions en CSS).

    Elles sont à comprendre comme le montre le schéma ci-dessous. Le trait plein représente l'élément complet ; le trait pointillé est le rectangle calculé par rect().

    Paramètres de la fonction rect()

Simulateur.

Le simulateur ci-dessous vous aidera à comprendre les paramètres de la fonction rect(). L'image a été positionnée en absolu (position:absolute) et ses dimensions ont été fixées à 200 pixels de coté.

clip:
( h d b g )
Exemple pour la fonction rect()

Compatibilité et prise en charge par les navigateurs.

Fonction obsolète : ne plus utiliser.

Voir aussi...

Formes géométriques - Propriétés.

  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • shape-outside : Définit le contournement du texte pour un élément flottant.

Formes géométriques - Fonctions.

  • circle() : Définit un cercle.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • ellipse() : Définit une ellipse.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • polygon() : Définit une forme.