Shape() - Fonction CSS

(1) L'animation de la fonction peut se faire de façon progressive ou brutale, suivant les commandes choisies. D'autre part, si l'animation modifie le premier paramètre (evenodd ou nonzero), elle sera brutale. Voyez le chapitre sur les animations.

Schéma syntaxique de shape().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

• x0 et y0 sont les coordonnées du point de départ.
• Les commandes move, line, etc. ont chacune une syntaxe, à découvrir en cliquant sur le schéma.

Description de la fonction shape().

La fonction shape() dessine une forme géométrique quelconque qui pourra être utilisé par exemple avec clip-path pour découper un élément.

Elle se comporte comme la fonction path(). Chacune des commandes SCG ayant un équivalent dans la syntaxe de shape(). shape() présente néanmoins les avantages suivants :

• shape() utilise la syntaxe de CSS, tandis que path() utilise la syntaxe de SVG, ce qui est moins intuitif, à moins que vous ne soyez déjà familiariser avec SVG.
• shape() reconnaît toutes les unités CSS et non pas seulement le pixel comme path().
• shape() accepte les fonctions de calculs de CSS, telles que calc(), minmax(), etc.

A contrario, on peut dire que shape() nécessite des syntaxes beaucoup plus longues que path().

Pour de plus amples renseignements, reportez-vous aux pages concernant les propriétés clip-path et offset-path. Vous pouvez aussi jeter un œil à la fonction path(), une fonction équivalente en syntaxe SVG.

La valeur shape() peut être utilisée avec les propriétés suivantes :

• clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...).
• offset-path : Définit le chemin sur lequel pourra se posiitionner un élément (Motion path).

Syntaxes de la fonction shape().

Règles générales.

Dans les exemples qui suivent, toutes les commandes peuvent être suivies des mots to ou by :
Avec le mot to les coordonnées du point sont considérés en absolues, par rapport au coin en haut à gauche de l'élément.
Avec le mot by il s'agit de coordonnées relatives, à ajouter ou retrancher de celles du dernier point tracé.

Des unités de dimension CSS peuvent être spécifiées après chacune des valeurs.

Les coordonnées indiquées après les commandes peuvent être des pourcentages. Dans ce cas ils seront calculés par rapport à la largeur de l'élément pour x et sa hauteur pour y.

• clip-path: shape( nonzero from 0px 0px, ... ); clip-path: shape( evenodd from 0px 0px, ... ); v x y

  La première valeur (v) détermine comment remplir la forme qui comporte des zones creuses. Pour déterminer cela on trace un rayon qui part de ce point, et on ajoute 1 lorsque ce rayon coupe un tracé qui va de la gauche vers la droite, et on retranche 1 lorsqu'il en coupe un qui va de la droite vers la gauche.

  • nonzero : le nombre d'intersections résultat est différent de zéro. C'est la valeur par défaut.
  • evenodd : le nombre d'intersections résultat est nul.
  nonzero

  evenodd

  Attention ce paramètre n'est pas supporté par la propriété offset-path. Son utilisation rend la règle invalide.

  
  Les paramètres x et y qui suivent le mot from donne la position de départ du tracé. Des unités de dimension peuvent être indiquées après chacune de ces valeurs.
  Les coordonnées sont mesurées à partir du coin en haut à gauche.
  

  Le première valeur peut aussi être : left, center ou right. La deuxième top, center ou bottom.
  left top étant le coin en haut à gauche de l'élément.

• clip-path: shape( ... line to 50px 50px, ... ); clip-path: shape( ... line by 50px 50px, ... );

  Trace une ligne depuis le dernier point tracé, vers le point indiqué, qui devient alors le dernier point tracé.

  Cette commande est identique à L ou l avec la fonction path().

• clip-path: shape( ... move to 50px 50px, ... ); clip-path: shape( ... move by 50px 50px, ... );

  Déplace sans tracé vers le point indiqué. Cette commande peut être utilisée pour fixer un nouveau point de départ pour de futures commandes.

  Équivaut à la commande M ou m en SVG (avec la fonction path()).

• clip-path: shape( ... hline to 50px, ... ); clip-path: shape( ... hline by 50px, ... ); clip-path: shape( ... vline to 50px, ... ); clip-path: shape( ... vline by 50px, ... );

  Trace une ligne horizontale (hline) ou verticale (vline) jusqu'au point indiqué (avec to ou de la longueur spécifiée (avec by).

  Ces commandes sont équivalents aux commandes SVG suivantes : H ou h, et V ou v.

• clip-path: shape( ... arc to 100px 50px of 50px 20px ccw small 45deg, ... ); clip-path: shape( ... arc by 100px 50px of 50px 20px ccw small 45deg, ... ); x y rx ry s l a

  Trace un arc de cercle ou d'ellipse jusqu'au point indiqué, en partant du dernier point tracé. Voici la signification des différents paramètres :

  • x et y sont les coordonnées du point de destination, an absolu avec to, ou en relatif avec by.
  • rx et ry sont les rayons horizontal et vertical de l'ellipse. Si une seule valeur est indiquée, la deuxième est considéré comme égale. On a donc un cercle.
  • s indique dans quel sens doit être tracé l'arc. ccw sens inverse des aiguilles d'une montre (valeur par défaut), et cw pour le sens des aiguilles d'une montre (cw est l'abréviation de clockwise).
  • l indique si l'arc tracé sera le plus petit (small) ou le plus gran (large).
  • a est l' angle de rotation de l'ellipse care l'ellipse peut être tournée. ⚠ Ce paramètre n'est pas pris en charge à l'heure actuelle.

  Cette commande est équivalent à la commande A ou a du SVG.

• clip-path: shape( ... curve to 100px 50px with 50px 20px, ... ); ⚠ clip-path: shape( ... curve by 100px 50px with 50px 20px, ... ); ⚠ x y x1 y1

  Trace une courbe de Bézier, en partant du dernier point tracé, et jusqu'au point indiqué. La deuxième paire de valeurs (x1 et y1) indique le point de contrôle.
  ⚠ Ne fonctionne pas sur Firefox  .

  Cette commande est équivalente aux commande C (ou c) du SVG.

• clip-path: shape( ... smooth to 100px 50px with 50px 20px, ... ); ⚠ clip-path: shape( ... smooth by 100px 50px with 50px 20px, ... ); ⚠ x y x1 y1

  Trace une courbe de Bézier lissée, en partant du dernier point tracé, et jusqu'au point indiqué par x et y. La deuxième paire de valeurs (x1 et y1) indique le point de contrôle.
  ⚠ Ne fonctionne pas sur Firefox  .

  La différence avec curve est que, avec smooth, la courbe est lissée par rapport au dernier point tracé, si la commande précédente est curve ou smooth. Ceci évite les raccordements angulaires.

  Avec curve.

  Avec smooth.

  Cette commande est équivalente aux commande S (coordonnées absolues) ou s (coordonnées relatives) du SVG.

• clip-path: shape( ... close, ... );

  Cette commande close ferme le tracé par un segment de droite rectiligne. Ce n'est pas forcément la dernière commande : on peut envisager une surface composée de plusieurs éléments fermés.

Exemples d'utilisation de la fonction shape().

Utilisée avec la propriété clip-path la fonction shape() permet de dessiner n'importe quelle forme, y compris les formes avec des arrondis. Cette forme peut ensuite être utilisée avec clip-path pour découper un élément, ou bien, utilisée avec offset-path elle peut être un parcours pour un élément (Motion Path).

Animation avec la fonction shape().

La fonction shape() peut être animée de façon progressive tant que le nombre de commandes ne varie pas au cours de l'animation, et que les commandes sont les même (seuls les paramètres peuvent changer). Si ce nombre varie ou si les commandes sont différentes, l'animation se fait, mais en mode discrete.

Il faut également veiller à ne pas modifier la première valeur (nonzero ou evenodd) car le changement de cette valeur ne peut se faire que de façon discrete.

Support de la fonction shape().

La fonction shape() est plus ou moins bien reconnue par les navigateurs à l'heure actuelle (2025). Sur Firefox   il faut l'activer en positionnant sur true le flag layout.css.basic-shape-shape.enabled (voir comment accéder aux flags sur Firefox).
Malgré cela la fonction est utilisable avec clip-path seulement, et sans les commandes curve et smooth.

Remarques :

(1) Désactivé par défaut sur Firefox. Peut être activé avec le flag layout.css.basic-shape-shape.enabled.
Les commandes curve et smooth restent malgré tout non reconnues.

1

Fonction
shape()

Estimation de la prise en charge globale.

76%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Safari

Safari sur IOS

Chrome

Firefox

1

Samsung Internet

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction shape().

• Module CSS - Formes de base - Niveau 1

  Introduction de la fonction shape() qui jour le même role que path() mais avec une syntaxe plus instinctive.
  

  20 Juin 2013

  Document de travail.

  

  20 Mars 2014

  Candidat à la recommandation.

  

  

Voir aussi à propos des formes graphiques.

Un petit module de la spécification du W3C traite ce qui concerne le découpage par une forme, avec clip-path

Propriétés :

Fonctions :