xywh()

<length-percentage>

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

<length-percentage [0,∞]>

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

round <'border-radius'>

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

В примере ниже свойство 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() функция
• clip-path свойство
• offset-path свойство
• <basic-shape> тип данных
• Модуль CSS shapes
• Руководство по базовым фигурам