Le type <basic-shape>
permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés clip-path
, shape-outside
ou offset-path
.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
Lorsque cette syntaxe est utilisée pour définir des formes, la boîte de référence sera indiquée par chaque propriété qui utilise des valeurs <basic-shape>
. L'origine du repère utilisé se situe dans le coin en haut à gauche de la boîte de référence avec un axe des abscisses allant vers la droite et un axe des ordonnées allant vers le bas. Toutes les longueurs exprimées en pourcentages sont calculées en fonction des dimensions de la boîte de référence.
Les formes qui suivent sont prises en charge. Toutes les valeurs <basic-shape>
sont créées via une notation fonctionnelle (pour analyser la syntaxe, se référer à cette page explicative).
inset()
-
inset( <shape-arg>{1,4} [round <border-radius>]? )
Cette fonction permet de définir un rectangle incrusté (inset).
Lorsque les quatre premiers arguments sont fournis, ils représentent respectivement les décalages, vers l'intérieur, depuis les côtés haut, droit, bas et gauche par rapport à la boîte de référence. Ces arguments peuvent être utilisés de la même façon que pour
margin
afin d'utiliser seulement une, deux ou quatre valeurs.L'argument facultatif
<border-radius>
permet de définir des coins arrondis pour le rectangle incrusté en utilisant la même syntaxe que pour la propriété raccourcieborder-radius
.Si on utilise deux valeurs de décalage pour le même axe (par exemple un décalage depuis le bas et un décalage depuis le haut) dont la somme est supérieure à la dimension de la boîte sur cet axe, la forme obtenue ne contiendra aucune zone. On aura alors une zone de flottement vide.
polygon()
-
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
<fill-rule>
représente la règle de remplissage utilisée pour déterminer l'intérieur du polygone. Les valeurs possibles sontnonzero
etevenodd
. La valeur par défaut pour cet argument estnonzero
.Ensuite, chaque paire d'arguments dans la liste représente les coordonnées xi et yi du i-ème sommet du polygone.
circle(
)-
circle( [<shape-radius>]? [at <position>]? )
L'argument
<shape-radius>
représente le rayon du cercle. Les valeurs négatives ne sont pas autorisées et les valeurs exprimées en pourcentages seront calculées de la façon suivante en fonction de la hauteur et de la largeur de la boîte de référencesqrt(largeur^2+hauteur^2)/sqrt(2)
.L'argument
<position>
définit la position pour le centre du cercle. La valeur par défaut estcenter
. ellipse()
-
ellipse( [<shape-radius>{2}]? [at <position>]? )
Les arguments
<shape-radius>
représentent les demi-axes horizontaux (rx) et verticaux (ry) de l'ellipse. Les valeurs négatives ne sont pas autorisées. Les valeurs exprimées en pourcentages sont calculées : en fonction de la hauteur de la boîte de référence pour le demi-axe vertical, en fonction de la largeur de la boîte de référence pour le demi-axe horizontal.L'argument
<position>
définit l'emplacement du centre de l'ellipse. La valeur par défaut estcenter
. path()
-
path( [<fill-rule>,]? <string>)
L'argument optionnel
<fill-rule>
représente la règle de remplissage utilisée pour déterminer l'intérieur du chemin. Les valeurs possibles sontnonzero
etevenodd
. La valeur par défaut estnonzero
.L'argument obligatoire
<string>
est une chaîne de caractères, entre quotes, représentant un chemin SVG.
Les arguments qui ne sont pas définis ci-avant suivent cette syntaxe :
<shape-arg> = <length> | <percentage> <shape-radius> = <length> | <percentage> | closest-side | farthest-side
closest-side
utilise la distance entre le centre de la forme et le côté le plus proche de la boîte de la référence. Pour les cercles, cela au côté le plus proche dans les deux axes. Pour les ellipses, cela correspond au côté le plus proche dans l'axe du rayon de l'ellipse.
À l'inverse, farthest-side
utilise la distance entre le centre de la forme et le côté le plus éloigné de la boîte de référence.
Les valeurs calculées des formes simples
Les valeurs d'une fonction <basic-shape>
sont calculées comme indiqué, avec ces exceptions :
- Les valeurs absentes sont incluses et leurs valeurs calculées sont leurs valeurs par défaut.
- Une valeur
<position>
pourcircle()
ouellipse()
est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage. - Pour
inset()
, une valeurborder-radius
est calculée comme une liste développée de de huit valeurslength
ou de huit pourcentages.
L'interpolation des formes simples
- Les deux formes doivent partager la même boîte de référence.
- Si les deux formes sont du même type et que ce type est
ellipse()
oucircle()
, qu'aucun des rayons n'utilise les mots-clésclosest-side
oufarthest-side
, on aura une interpolation entre chaque valeur. - Si les deux formes sont de type
inset()
, on aura une interpolation entre chaque valeur. - Si les deux formes sont de type
polygon()
, que les deux polygones possèdent le même nombre de sommets et utilisent la même règlefill-rule
, l'interpolation sera appliquée entre chaque valeur. - Si les deux formes sont de type
path()
, que les deux chemins possèdent le même nombre de composantes, dans le même ordre et qu'elles sont de même type, les données sont interpolées entre chaque chemin comme des nombres réels. - Dans les autres cas, aucune interpolation n'est définie.
Exemples
Exemple simple
CSS
.clipped { clip-path: circle(15px at 20px 20px); // bugs 1247229 / 1075457 pour Firefox }
HTML
<img class="clipped" src="https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg" alt="Rain Drops">
Résultat
Polygone animé
Dans cet exemple, on utilise la règle-@ @keyframes
afin d'animer un chemin de rognage entre deux polygones. On notera que les deux polygones ont le même nombre de sommets, une condition nécessaire pour que l'animation fonctionne.
HTML
<div></div>
CSS
div { width: 300px; height: 300px; background: red; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); animation: 5s poly infinite alternate ease-in-out; margin: 1em auto; display: block; } @keyframes poly { from { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } to { clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%); } }
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Shapes Module Level 1 La définition de '<basic-shape>' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<basic-shape> | Chrome Support complet 37 | Edge Aucun support Non | Firefox Support complet 54 | IE Aucun support Non | Opera Support complet 24 | Safari Support complet 10.1 | WebView Android Support complet 37 | Chrome Android Support complet 37 | Firefox Android Support complet 54 | Opera Android Support complet 24 | Safari iOS Support complet 10.3 | Samsung Internet Android Support complet 3.0 |
Animation | Chrome Support complet 37 | Edge Aucun support Non | Firefox Support complet 54 | IE Aucun support Non | Opera Support complet 24 | Safari Support complet 10.1 | WebView Android Support complet 37 | Chrome Android Support complet 37 | Firefox Android Support complet 54 | Opera Android Support complet 24 | Safari iOS Support complet 10.3 | Samsung Internet Android Support complet 3.0 |
circle() | Chrome Support complet 37 | Edge Aucun support Non | Firefox Support complet 54 | IE Aucun support Non | Opera Support complet 24 | Safari Support complet 10.1 | WebView Android Support complet 37 | Chrome Android Support complet 37 | Firefox Android Support complet 54 | Opera Android Support complet 24 | Safari iOS Support complet 10.3 | Samsung Internet Android Support complet 3.0 |
inset() | Chrome Support complet 37 | Edge Aucun support Non | Firefox Support complet 54 | IE Aucun support Non | Opera Support complet 24 | Safari Support complet 10.1 | WebView Android Support complet 37 | Chrome Android Support complet 37 | Firefox Android Support complet 54 | Opera Android Support complet 24 | Safari iOS Support complet 10.3 | Samsung Internet Android Support complet 3.0 |
path() | Chrome
Support partiel
46
| Edge Aucun support Non | Firefox
Support partiel
63
| IE Aucun support Non | Opera
Support partiel
Partiel
| Safari Aucun support Non | WebView Android
Support partiel
46
| Chrome Android
Support partiel
46
| Firefox Android
Support partiel
63
| Opera Android
Support partiel
Partiel
| Safari iOS Aucun support Non | Samsung Internet Android
Support partiel
5.0
|
polygon() | Chrome Support complet 37 | Edge Aucun support Non | Firefox Support complet 54 | IE Aucun support Non | Opera Support complet 24 | Safari Support complet 10.1 | WebView Android Support complet 37 | Chrome Android Support complet 37 | Firefox Android Support complet 54 | Opera Android Support complet 24 | Safari iOS Support complet 10.3 | Samsung Internet Android Support complet 3.0 |
Légende
- Support complet
- Support complet
- Support partiel
- Support partiel
- Aucun support
- Aucun support
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.