xywh()
Baseline
2024
Newly available
Since January 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
La fonction CSS xywh()
crée un rectangle à partir des distances spécifiées depuis le bord gauche (x
) et le bord supérieur (y
) du bloc englobant, ainsi que la largeur (w
) et la hauteur (h
) du rectangle. Il s'agit d'une fonction de forme de base du type de donnée <basic-shape>
. Vous pouvez utiliser la fonction xywh()
dans des propriétés CSS telles que offset-path
pour créer le chemin rectangulaire le long duquel un élément se déplace, ou dans clip-path
pour définir la forme de la région de découpe.
Syntaxe
offset-path: xywh(0 1% 2px 3% round 0 1px 2% 3px);
clip-path: xywh(1px 2% 3px 4em round 0 1% 2px 3em);
Valeurs
<length-percentage>
-
Définit les valeurs
<length-percentage>
pour les coordonnéesx
ety
du rectangle. <length-percentage [0,∞]>
-
Définit des valeurs
<length-percentage>
non négatives pour la largeur et la hauteur du rectangle. La valeur minimale peut être zéro, la valeur maximale n'a pas de limite. round <'border-radius'>
-
Définit le rayon des coins arrondis du rectangle en utilisant la même syntaxe que la propriété abrégée CSS
border-radius
. Ce paramètre est optionnel.
Syntaxe formelle
<xywh()> =
xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )
<length-percentage> =
<length> |
<percentage>
<border-radius> =
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
Exemples
>Créer un offset-path avec xywh()
Dans l'exemple ci-dessous, la propriété offset-path
utilise la fonction xywh()
pour définir la forme du chemin sur lequel l'élément (une boîte magenta ici) se déplace. Deux scénarios différents sont présentés, chacun avec des valeurs différentes pour la fonction xywh()
. La flèche à l'intérieur des boîtes pointe vers le bord droit de la boîte.
<div class="container">
Chemin rectangulaire 1
<div class="path xywh-path-1">→</div>
</div>
<div class="container">
Chemin rectangulaire 2
<div class="path xywh-path-2">→</div>
</div>
.container {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 30px;
text-align: center;
}
.path {
width: 50px;
height: 50px;
position: absolute;
background-color: magenta;
animation: move 10s linear infinite;
}
.xywh-path-1 {
offset-path: xywh(20px 20px 100% 100% round 10%);
}
.xywh-path-2 {
offset-path: xywh(20px 30% 150% 200%);
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
Résultat
- Le rectangle du chemin 1 est décalé de
20px
depuis les bords gauche et supérieur du bloc englobant. Ce rectangle a les mêmes dimensions que le bloc englobant, c'est-à-dire que la largeur est de100%
de la largeur du bloc englobant et la hauteur de100%
de sa hauteur. Remarquez comment la flèche à l'intérieur de la boîte suit la courbe de10%
(définie parround 10%
) aux coins du chemin rectangulaire. - Comme la limite supérieure de la largeur et de la hauteur dans
xywh()
est infinie, définir la hauteur à200%
dans le rectangle du chemin 2 rend le rectangle généré deux fois plus haut que le bloc englobant. Remarquez le comportement de la flèche aux coins lorsqueround <'border-radius'>
n'est pas spécifié.
Spécifications
Specification |
---|
CSS Shapes Module Level 1> # funcdef-basic-shape-xywh> |
Compatibilité des navigateurs
Loading…
Voir aussi
- La fonction
inset()
- La fonction
rect()
- La propriété
clip-path
- La propriété
offset-path
- Le type de données
<basic-shape>
- Le module des formes CSS
- Guide des formes de base