rect()

Прямоугольник смещения определяется четырьмя значениями смещения, начиная со смещения по вертикали (верхний край), двигаясь по часовой стрелке, и необязательным ключевым словом round с параметром border-radius для добавления скругленных углов прямоугольника. Каждое значение смещения может быть <length>, <percentage>, или ключевым словом auto.

<length-percentage>

Указывает значение <length-percentage> расстояния от верхнего или левого края содержащего блока до верхнего, правого, нижнего или левого края прямоугольника. Первое (верхнее) и третье (нижнее) значения — это расстояния от верхнего края содержащего блока, а второе (правое) и четвёртое (левое) — от левого края содержащего блока. Второе (правое) и третье (нижнее) значения ограничиваются четвёртым (левым) и первым (верхним) значениями соответственно, чтобы предотвратить пересечение нижнего края с верхним и правого края с левым. Например, rect(10px 0 0 20px) ограничивается rect(10px 20px 10px 20px).

auto

Заставляет край, для которого используется это значение, совпадать с соответствующим краем содержащего блока. Если auto используется для первого (верхнего) или четвёртого (левого) значения, значение auto равно 0, а если используется для второго (правого) или третьего (нижнего) значения, значение auto равно 100%.

round <'border-radius'>

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

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

<div class="container">
  Rectangular path 1
  <div class="path rect-path-1">→</div>
</div>
<div class="container">
  Rectangular path 2
  <div class="path rect-path-2">→</div>
</div>
<div class="container">
  Rectangular path 3
  <div class="path rect-path-3">→</div>
</div>

.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 15px;
  text-align: center;
}

.path {
  width: 40px;
  height: 40px;
  background-color: red;
  position: absolute;
  animation: move 10s linear infinite;
}

.rect-path-1 {
  offset-path: rect(50px 150px 200px 50px round 20%);
}

.rect-path-2 {
  offset-path: rect(50px auto 200px 50px round 20%);
}

.rect-path-3 {
  offset-path: rect(50px auto 200px auto);
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

Результат

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

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