CSS-функция `rect()`

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

Синтаксис

offset-path: rect(0 1% auto 3% round 0 1px);
clip-path: rect(50px 70px 80% 20%);
border-shape: rect(10px 500px 130px 20px round 20px);

Значения

Внутренний прямоугольник задается указанием четырех значений смещения, начиная со смещения верхнего края и далее по часовой стрелке, а также необязательного ключевого слова 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. Этот параметр необязателен.

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

<rect()> = 
  rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? )

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

Примеры

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

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