Type CSS <basic-shape>

Exemple interactif

clip-path: inset(22% 12% 15px 35px);

clip-path: circle(6rem at 12rem 8rem);

clip-path: ellipse(115px 55px at 50% 40%);

clip-path: polygon(
  50% 2.4%,
  34.5% 33.8%,
  0% 38.8%,
  25% 63.1%,
  19.1% 97.6%,
  50% 81.3%,
  80.9% 97.6%,
  75% 63.1%,
  100% 38.8%,
  65.5% 33.8%
);

clip-path: path("M 50,245 A 160,160 0,0,1 360,120 z");

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Syntaxe

Le type de donne <basic-shape> permet de crer des formes de base, incluant des rectangles par dcalage du conteneur, par distance, ou par dimensions dfinies, des cercles, ellipses, polygones, chemins, et formes cres par l'auteurice. Ces formes sont dfinies l'aide d'une fonction CSS <basic_shape>, chaque valeur ncessitant un paramtre selon la syntaxe spcifique la fonction.

Paramtres communs

Les paramtres communs certaines fonctions de forme de base incluent :

round <'border-radius'>

Dfinit les coins arrondis pour les rectangles par dcalage du conteneur, rectangles par distance et rectangles dimensions en utilisant la mme syntaxe que la proprit abrge CSS border-radius.

<shape-radius>

Dfinit le rayon pour un cercle ou une ellipse. Les valeurs valides incluent <length>, <percentage>, closest-side (valeur par dfaut), farthest-side, closest-corner et farthest-corner. Les valeurs ngatives sont invalides.

Le mot-cl closest-side utilise la distance du centre de la forme au ct le plus proche de la bote de rfrence pour crer la longueur du rayon. Le mot-cl farthest-side utilise la distance du centre de la forme au ct le plus loign de la bote de rfrence. De mme, les mots-cls closest-corner et farthest-corner utilisent la distance du centre de la forme au coin le plus proche et au coin le plus loign, respectivement.

<position>

Dfinit le centre <position> d'un cercle ou d'une ellipse. Par dfaut, la valeur est center si omise.

<fill-rule>

Dfinit la rgle de remplissage (fill-rule) utilise pour dterminer comment l'intrieur de la forme dfinie par les formes de base polygone, chemin et forme est remplie. Les valeurs possibles sont nonzero (par dfaut) et evenodd.

Note : <fill-rule> n'est pas pris en charge dans offset-path et son utilisation invalide la proprit.

Syntaxe pour les rectangles par dcalage du conteneur

La fonction inset() cre un rectangle en retrait, dont la taille est dfinie par la distance de dcalage de chacun des quatre cts de son conteneur et, optionnellement, des coins arrondis.

inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )

Lorsque les quatre premiers arguments sont fournis, ils reprsentent les dcalages haut, droite, bas et gauche depuis la bote de rfrence vers l'intrieur, dfinissant la position des bords du rectangle en retrait. Ces arguments suivent la syntaxe de la proprit abrge margin, permettant de dfinir les quatre retraits avec une, deux, trois ou quatre valeurs.

Si la somme des deux marges d'une dimension dpasse 100% de cette dimension, les deux valeurs sont rduites proportionnellement pour que leur somme soit gale 100%. Par exemple, la valeur inset(90% 10% 60% 10%) a un retrait haut de 90% et un retrait bas de 60%. Ces valeurs sont rduites proportionnellement inset(60% 10% 40% 10%). Les formes de ce type, qui n'enferment aucune zone et n'ont pas de shape-margin, n'affectent pas l'habillage.

Syntaxe pour les rectangles par distance

La fonction rect() dfinit un rectangle en utilisant les distances dfinies depuis les bords suprieur et gauche de la bote de rfrence, avec des coins arrondis optionnels.

rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? )

Avec la fonction rect(), vous ne dfinissez pas la largeur et la hauteur du rectangle. Vous dfinissez plutt quatre valeurs pour crer le rectangle, ses dimensions tant dtermines par la taille de la bote de rfrence et les quatre valeurs de dcalage. Chaque valeur peut tre soit une <length>, une <percentage> ou le mot-cl auto. Le mot-cl auto est interprt comme 0% pour les valeurs haut et gauche, et comme 100% pour les valeurs bas et droite.

Syntaxe pour les rectangles dimensions

La fonction xywh() dfinit un rectangle situ des distances dfinies depuis les bords gauche (x) et haut (y) de la bote de rfrence, et dimensionn par la largeur (w) et la hauteur (h) du rectangle, dans cet ordre, avec des coins arrondis optionnels.

xywh( <length-percentage>{2} <length-percentage [0,]>{2} [ round <'border-radius'> ]? )

Syntaxe pour les cercles

La fonction circle() dfinit un cercle l'aide d'un rayon et d'une position.

circle( <shape-radius>? [ at <position> ]? )

L'argument <shape-radius> reprsente le rayon du cercle, dfini comme une longueur (<length>) ou un pourcentage (<percentage>). Une valeur en pourcentage est rsolue partir de la largeur et de la hauteur utilises de la bote de rfrence comme sqrt(width^2+height^2)/sqrt(2). Si omis, le rayon est dfini par closest-side.

Syntaxe pour les ellipses

La fonction ellipse() dfinit une ellipse l'aide de deux rayons et d'une position.

ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )

Les arguments <shape-radius> reprsentent rx et ry, les rayons selon les axes x et y de l'ellipse, dans cet ordre. Ces valeurs sont dfinies comme une longueur (<length>) ou un pourcentage (<percentage>). Les valeurs en pourcentage sont rsolues par rapport la largeur utilise (pour rx) et la hauteur utilise (pour ry) de la bote de rfrence. Si un seul rayon est fourni, la fonction ellipse() est invalide. Si aucune valeur n'est fournie, 50% 50% est utilis.

Syntaxe pour les polygones

La fonction polygon() dfinit un polygone l'aide d'une rgle de remplissage fill-rule SVG et d'un ensemble de coordonnes.

polygon( <'fill-rule'>? , [ <length-percentage> <length-percentage> ]# )

La fonction prend une liste de paires de coordonnes spares par des virgules, chacune compose de deux valeurs <length-percentage> spares par un espace, reprsentant les coordonnes x et y du polygone la position i (le sommet o deux lignes se rejoignent).

Syntaxe pour les chemins

La fonction path() dfinit une forme l'aide d'une rgle de remplissage fill-rule SVG et d'une dfinition de chemin SVG.

path( <'fill-rule'>? , <string> )

La chane de caractres (<string>) requise est un chemin SVG sous forme de chane de caractres entre guillemets. La fonction path() n'est pas une valeur valide pour la proprit shape-outside.

Syntaxe pour les formes

La fonction shape() dfinit une forme l'aide d'un point de dpart initial et d'une srie de commandes de forme.

shape( <'fill-rule'>? from <coordinate-pair> , <shape-command># )

Le paramtre from <coordinate-pair> reprsente le point de dpart pour la premire commande de forme, et <shape-command> dfinit une ou plusieurs commandes de forme, similaires aux commandes de chemin SVG. La fonction shape() n'est pas une valeur valide pour la proprit shape-outside.

Description

Lors de la cration d'une forme, la bote de rfrence est dfinie par la proprit qui utilise les valeurs <basic-shape>. Le systme de coordonnes de la forme a son origine dans le coin suprieur gauche de la bote de marge de l'lment par dfaut, l'axe x allant vers la droite et l'axe y vers le bas. Toutes les longueurs exprimes en pourcentage sont rsolues partir des dimensions de la bote de rfrence.

La bote de rfrence par dfaut est la margin-box, comme illustr dans l'image ci-dessous. L'image montre un cercle cr avec shape-outside: circle(50%), mettant en vidence les diffrentes parties du modle de bote telles qu'affiches dans les outils de dveloppement du navigateur. La forme ici est dfinie par rapport la margin-box.

[Une image montrant un cercle inspect avec l'inspecteur de formes de Firefox DevTools. Les diffrentes parties du modle de bote sont mises en vidence.]

Valeurs calcules des formes de base

Les valeurs dans une fonction <basic-shape> sont calcules comme dfinies, avec les considrations supplmentaires suivantes :

• Pour toute valeur omise, sa valeur par dfaut est utilise.
• Une valeur <position> dans circle() ou ellipse() est calcule comme une paire de coordonnes de dcalages depuis le coin suprieur gauche de la bote de rfrence : le premier dcalage est horizontal, le second est vertical. Chaque dcalage est dfini comme une valeur <length-percentage>.
• Une valeur <border-radius> dans inset() est dveloppe en une liste de huit valeurs, chacune tant soit une <length> soit une <percentage>.
• Les fonctions inset(), rect() et xywh() sont calcules comme la fonction inset() quivalente.

Interpolation des formes de base

Lors de l'animation entre deux fonctions <basic-shape>, les rgles d'interpolation suivantes s'appliquent. Les valeurs des paramtres de chaque fonction <basic-shape> forment une liste. Pour qu'une interpolation ait lieu entre deux formes, les deux formes doivent utiliser la mme bote de rfrence et le nombre et le type de valeurs dans les deux listes <basic-shape> doivent correspondre.

Chaque valeur dans les listes des deux fonctions <basic-shape> est interpole selon sa valeur calcule comme <number>, <length>, <percentage>, <angle> ou calc() lorsque c'est possible. L'interpolation peut tout de mme avoir lieu si les valeurs ne sont pas de ces types mais sont identiques entre les deux fonctions de forme de base interpoles, comme nonzero.

• Les deux formes sont de type ellipse() ou circle() : l'interpolation s'applique chaque valeur correspondante si leurs rayons sont dfinis comme <length> ou <percentage> (et non par des mots-cls comme closest-side ou farthest-side).

• Les deux formes sont de type inset() : l'interpolation s'applique chaque valeur correspondante.

• Les deux formes sont de type polygon() : l'interpolation s'applique chaque valeur correspondante si elles utilisent la mme <fill-rule> et ont le mme nombre de paires de coordonnes spares par des virgules.

• Les deux formes sont de type path() : l'interpolation s'applique chaque paramtre comme <number> si les chanes de caractres de chemin dans les deux formes correspondent en nombre, type et squence de commandes de donnes de chemin.

• Les deux formes sont de type shape() : l'interpolation s'applique chaque valeur correspondante si elles ont le mme mot-cl de commande et utilisent le mme mot-cl <by-to>. Si shape() est utilis dans la proprit clip-path, les deux formes interpolent si elles ont aussi la mme <fill-rule>.

  • Si elles utilisent la <curve-command> ou la <smooth-command>, le nombre de points de contrle doit correspondre pour l'interpolation.

  • Si elles utilisent <arc-command> avec des directions <arc-sweep> diffrentes, le rsultat interpol va dans le sens horaire (cw). Si elles utilisent des mots-cls <arc-size> diffrents, la taille est interpole en utilisant la valeur large.

• Une forme est de type path() et l'autre de type shape() : l'interpolation s'applique chaque valeur correspondante si la liste des commandes de donnes de chemin est identique en nombre et en squence. La forme interpole est une fonction shape(), conservant la mme liste de commandes de donnes de chemin.

Dans tous les autres cas, aucune interpolation n'a lieu et l'animation est discrte.

Exemples

Polygone anim

Dans cet exemple, on utilise la rgle @keyframes pour animer un chemin de dcoupe entre deux polygones. Notez que les deux polygones ont le mme nombre de sommets, ce qui est ncessaire pour que ce type d'animation fonctionne.

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(
      50% 0%,
      60% 40%,
      100% 50%,
      60% 60%,
      50% 100%,
      40% 60%,
      0% 50%,
      40% 40%
    );
  }

  to {
    clip-path: polygon(
      50% 30%,
      100% 0%,
      70% 50%,
      100% 100%,
      50% 70%,
      0% 100%,
      30% 50%,
      0% 0%
    );
  }
}

Rsultat

Spcifications

Compatibilit des navigateurs

Voir aussi

• Proprits utilisant ce type : border-shape, clip-path, offset-path, shape-outside
• lments SVG : <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>
• Prsentation des formes CSS
• Le module de formes CSS
• Introduction au masquage CSS
• Le module de masquage CSS
• Modifier les chemins de forme dans Firefox Developer Tools (angl.)