CSS xywh() Function
The CSS xywh() function is used to create a
rectangle that starts at the x and y coordinates of the contaning block, with
the specified
width and height.
You can use the xywh() function in CSS
properties such as:
Example
Here we use the xywh() function in offset-path to create a rectangular track for an element to animate along:
.path {
width: 45px;
height: 45px;
position:
absolute;
background-color: green;
animation: move 8s
linear infinite;
}
.xywh-path {
offset-path: xywh(10px 10px 100% 100%);
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
Try it Yourself »
More "Try it Yourself" examples below.
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| xywh() | 119 | 119 | 122 | 17.2 | 105 |
CSS Syntax
xywh(x y width height round border-radius)
| Value | Description |
|---|---|
| x | Required. The distance from the left edge of the reference box |
| y | Required. The distance from the top edge of the reference box |
| width | Required. The width of the rectangle |
| height | Required. The height of the rectangle |
| round border-radius | Optional. Uses standard border-radius to smooth out the corners |
| Version: | CSS Shapes Module Level 1 |
|---|
More Examples
Example
Here we have added the optional round border-radius to let the rectangle smooth out the corners:
.path {
width: 45px;
height: 45px;
position:
absolute;
background-color: green;
animation: move 8s
linear infinite;
}
.xywh-path {
offset-path: xywh(10px 10px 100% 100%
round 20%);
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
Try it Yourself »
