<basic-shape>

Тип данных <basic-shape> используется для создания основных фигур, включая прямоугольники с помощью отступов контейнера, с помощью расстояния координат или с помощью установленных размеров, круги, эллипсы, многоугольники, траектории и созданные пользователем формы. Эти основные фигуры определяются с помощью одной <basic_shape> функции CSS, причем каждое значение требует параметра, который следует синтаксису, специфичному для функции формы.

Параметры, общие для синтаксиса некоторых функций основных форм, включают:

round <'border-radius'>

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

<shape-radius>

Определяет радиус для круга или эллипса. Допустимые значения включают <length>, <percentage>, closest-side (по умолчанию) и farthest-side. Отрицательные значения недопустимы.

Значение ключевого слова closest-side использует длину от центра фигуры до ближайшей стороны области-ссылки для создания длины радиуса. Значение ключевого слова farthest-side использует длину от центра фигуры до самой дальней стороны области-ссылки.

<position>

Определяет центральное <position> круга или эллипса. По умолчанию используется center если не указано.

<fill-rule>

Устанавливает fill-rule, используемый для определения того, как должна быть заполнена внутренняя часть фигуры, определенной многоугольниками polygon, путями и фигурами. Возможные значения — nonzero (по умолчанию) и evenodd.

Примечание: <fill-rule> не поддерживается в offset-path, и его использование делает свойство недействительным.

Функция inset() создает прямоугольник с отступом, размер которого определяется расстоянием смещения каждой из четырех сторон его контейнера и, необязательно, скругленными углами.

inset( <length-percentage>{1,4} [ round <`border-radius`> ]? )

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

Если пара отступов для измерения суммируется более чем на 100 % этого измерения, оба значения пропорционально уменьшаются таким образом, чтобы их сумма составляла 100 %. Например, значение inset(90% 10% 60% 10%) имеет верхний отступ 90% и нижний отступ 60%. Эти значения уменьшаются пропорционально до inset(60% 10% 40% 10%). Такие фигуры, которые не охватывают никакой области и не имеют shape-margin, не влияют на обертку.

Функция rect() определяет прямоугольник, используя указанные расстояния от верхнего и левого краев области-ссылки, с необязательными скругленными углами.

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

При использовании функции rect() вы не определяете ширину и высоту прямоугольника. Вместо этого вы указываете четыре значения для создания прямоугольника, размеры которого определяются размером области-ссылки и четырьмя значениями смещения. Каждое значение может быть <length>, <percentage> или ключевым словом auto. Ключевое слово auto интерпретируется как 0% для значений сверху и слева и как 100% для значений снизу и справа.

Функция xywh() определяет прямоугольник, расположенный на указанных расстояниях слева (x) и сверху (y) от краев области-ссылки и имеющий заданную ширину (w) и высоту (h) прямоугольника в указанном порядке, с необязательными скругленными углами.

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

Функция circle() определяет круг, используя радиус и положение.

circle( <shape-radius>? [ at <position> ]? )

Аргумент <shape-radius> представляет собой радиус круга, определённый как <length> или <percentage>. Значение процента здесь вычисляется из используемой ширины и высоты области-ссылки как sqrt(width^2+height^2)/sqrt(2). Если он опущен, радиус определяется значением closest-side.

Функция ellipse() определяет эллипс, используя два радиуса и положение.

ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )

Аргументы <shape-radius> представляют собой rx и ry — радиусы эллипса по осям x и y соответственно. Эти значения задаются как <length> или <percentage>. Значения процентов здесь вычисляются относительно используемой ширины (для значения rx) и используемой высоты (для значения ry) области-ссылки. Если предоставлено только одно значение радиуса, функция формы ellipse() недействительна. Если значения не предоставлены, используется 50% 50%.

Функция polygon() определяет многоугольник, используя SVG fill-rule и набор координат.

polygon( <`fill-rule`>?, [ <length-percentage> <length-percentage> ]# )

Функция принимает список пар координат, разделенных запятыми, каждая из которых состоит из двух значений, разделенных пробелами, как пара xi и yi. Эти значения представляют координаты по осям x и y многоугольника в позиции i (вершина, где пересекаются две линии).

Функция path() определяет фигуру, используя SVG fill-rule и определение траектории SVG.

path( <`fill-rule`>?, ]? <string> )

Требуемый <string> — это SVG-траектория в виде строкового значения в кавычках. Функция path() не является допустимым значением свойства shape-outside.

Функция shape() определяет фигуру, используя начальную точку и серию команд фигуры.

shape( <fill-rule>? from <coordinate-pair>, <shape-command># )

Параметр from <coordinate-pair> представляет собой начальную точку для первой команды фигуры, а <shape-command> определяет одну или несколько команд фигуры, которые похожи на команды SVG-траекторий. Функция shape() не является допустимым значением свойства shape-outside.

При создании фигуры, область отсчёта определяется свойством, использующим значения <basic-shape>. Система координат фигуры по умолчанию имеет начало в верхнем левом углу рамки элемента, ось X направлена вправо, а ось Y — вниз. Все длины, выраженные в процентах, вычисляются относительно размеров области отсчёта.

По умолчанию, областью отсчёта является margin-box, как показано на изображении ниже. На изображении показан круг, созданный с помощью shape-outside: circle(50%), где выделены различные части модели рамки, как отображаются в средствах разработчика браузера. Фигура здесь определена относительно margin-box.

Значения в функции <basic-shape> вычисляются как указано, с учётом следующих моментов:

• Для пропущенных значений используются значения по умолчанию.
• Значение <position> в circle() или ellipse() вычисляется как пара смещений от верхнего левого угла области отсчёта: первое смещение — горизонтальное, второе — вертикальное. Каждое смещение задаётся как значение <length-percentage>.
• Значение <border-radius> в inset() расширяется в список из восьми значений, каждое из которых является либо <length>, либо <percentage>.
• inset(), rect() и xywh() функции вычисляются как эквивалентные функции inset().

При анимации между двумя функциями <basic-shape>, следуют правила интерполяции, перечисленные ниже. Значения параметров каждой функции <basic-shape> образуют список. Для интерполяции между двумя фигурами обе фигуры должны использовать одну и ту же область отсчёта, и количество и тип значений в обоих списках <basic-shape> должны совпадать.

Каждое значение в списках двух функций <basic-shape> интерполируется на основе его вычисленного значения как <number>, <length>, <percentage>, <angle> или calc(), где это возможно. Интерполяция всё ещё может произойти, если значения не являются одним из этих типов данных, но идентичны между двумя интерполируемыми функциями базовой фигуры, такими как nonzero.

• Обе фигуры имеют тип ellipse() или тип circle(): Интерполяция применяется к каждому соответствующему значению, если их радиусы заданы как <length> или <percentage> (а не ключевыми словами, такими как closest-side или farthest-side).

• inset(): Интерполяция применяется к каждому соответствующему значению.

• polygon(): Интерполяция применяется к каждому соответствующему значению, если они используют ту же <fill-rule> и имеют одинаковое количество пар координат, разделённых запятыми.

• path(): Интерполяция применяется к каждому параметру как к <number>, если строки пути в обеих фигурах соответствуют количеству, типу и последовательности команд данных пути.

• shape(): Интерполяция применяется к каждому соответствующему значению, если они имеют одинаковый ключевое слово команды и используют то же ключевое слово <by-to> . Если shape() используется в свойстве clip-path, две фигуры интерполируются, если у них также одинаковый <fill-rule>.

  • Если они используют <curve-command> или <smooth-command>, количество контрольных точек должно совпадать для интерполяции.

  • Если они используют <arc-command> с разными направлениями <arc-sweep>, интерполированный результат идёт по часовой стрелке (cw). Если они используют разные ключевые слова <arc-size>, размер интерполируется с использованием значения large.

• Одна фигура имеет тип path() , а другая — тип shape(): Интерполяция применяется к каждому соответствующему значению, если список команд данных пути идентичен по количеству и последовательности. Интерполированная фигура является функцией shape() , сохраняя тот же список команд данных пути.

Во всех остальных случаях интерполяция не происходит, и анимация является дискретной.

В этом примере мы используем правило @keyframes для анимации обрезки между двумя многоугольниками. Обратите внимание, что оба многоугольника имеют одинаковое количество вершин, что необходимо для работы этого типа анимации.

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(
      50% 0%,
      60% 40%,
      100% 50%,
      60% 60%,
      50% 100%,
      40% 60%,
      0% 50%,
      40% 40%
    );
  }

  to {
    clip-path: polygon(
      50% 30%,
      100% 0%,
      70% 50%,
      100% 100%,
      50% 70%,
      0% 100%,
      30% 50%,
      0% 0%
    );
  }
}

Результат

• Свойства, использующие этот тип данных: clip-path, offset-path, shape-outside,
• Модуль CSS shapes
• Обзор CSS фигур
• Редактирование путей фигур в CSS — инструменты разработчика Firefox