Функция CSS `xywh()`

xywh() CSS-функция создаёт прямоугольник, используя заданные расстояния от левого (x) и верхнего (y) краёв содержащего блока, а также заданные ширину (w) и высоту (h) прямоугольника. Это функция базовой фигуры типа данных <basic-shape> типа данных. Функцию xywh() можно использовать в таких CSS-свойствах, как offset-path, чтобы создать прямоугольный путь, по которому перемещается элемент, в clip-path, чтобы задать форму области обрезки, и в border-shape, чтобы задать форму границы элемента.

Синтаксис

offset-path: xywh(0 1% 2px 3% round 0 1px 2% 3px);
clip-path: xywh(1px 2% 3px 4em round 0 1% 2px 3em);
border-shape: xywh(5% 5% 90% 90% round 20px);

Значения

<length-percentage>

Задаёт значения <length-percentage> для координат x и y прямоугольника.

<length-percentage [0,∞]>

Задаёт неотрицательные значения <length-percentage> для ширины и высоты прямоугольника. Минимальное значение может быть равно нулю, а максимальное не ограничено.

round <'border-radius'>

Задаёт радиус скруглённых углов прямоугольника с использованием того же синтаксиса, что и у сокращённого CSS-свойства border-radius. Этот параметр необязателен.

Формальный синтаксис

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

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Создание offset-path с помощью xywh()

В примере ниже свойство offset-path использует функцию xywh(), чтобы задать форму пути, по которому перемещается элемент — в данном случае пурпурный прямоугольник. Показаны два сценария, в каждом из которых используются разные значения функции xywh(). Стрелка внутри прямоугольников указывает на их правый край.

<div class="container">
  Rectangular path 1
  <div class="path xywh-path-1">→</div>
</div>
<div class="container">
  Rectangular path 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%;
  }
}

Результат

• Прямоугольник пути 1 смещён на 20px от левого и верхнего краёв содержащего блока. Размеры этого прямоугольника пути совпадают с размерами содержащего блока: его ширина составляет 100% ширины содержащего блока, а высота — 100% его высоты. Обратите внимание, как стрелка внутри прямоугольника следует 10% кривой (заданной с помощью round 10%) в углах прямоугольного пути.
• Поскольку верхний предел ширины и высоты в xywh() равен бесконечности, установка высоты 200% для прямоугольника пути 2 делает созданный прямоугольник вдвое выше содержащего блока. Обратите внимание, как ведёт себя стрелка внутри прямоугольника в углах, если round <'border-radius'> не задан.

Спецификации

Совместимость с браузерами

См. также

• функция inset()
• функция rect()
• свойство border-shape
• свойство clip-path
• свойство offset-path
• тип данных <basic-shape>
• модуль фигур CSS
• Руководство по базовым фигурам