`<basic-shape>` — тип CSS

<basic-shape> — это CSS тип данных, представляющий фигуру, используемую в свойствах border-shape, clip-path, offset-path и shape-outside.

Попробуйте

clip-path: inset(22% 12% 15px 35px);

clip-path: circle(6rem at 12rem 8rem);

clip-path: ellipse(115px 55px at 50% 40%);

clip-path: polygon(
  50% 2.4%,
  34.5% 33.8%,
  0% 38.8%,
  25% 63.1%,
  19.1% 97.6%,
  50% 81.3%,
  80.9% 97.6%,
  75% 63.1%,
  100% 38.8%,
  65.5% 33.8%
);

clip-path: path("M 50,245 A 160,160 0,0,1 360,120 z");

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Синтаксис

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

Общие параметры

К параметрам, общим для синтаксиса некоторых функций базовых фигур, относятся:

round <'border-radius'>

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

<shape-radius>

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

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

<position>

Задаёт центральную position круга или эллипса. Если значение не указано, используется center.

<fill-rule>

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

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

Синтаксис прямоугольников: <basic-shape-rect>

Тип <basic-shape-rect>, подмножество типа <basic-shape>, представляет функции базовых фигур, предназначенные только для создания прямоугольников, включая inset(), rect() и xywh().

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

Синтаксис прямоугольников, заданных внутренними отступами контейнера

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

Синтаксис многоугольников

Функция polygon() задаёт многоугольник с помощью набора пар координат, разделённых запятыми; перед ними можно указать правило fill-rule из SVG, параметр скругления углов или оба параметра.

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

Первый необязательный параметр может содержать один или оба следующих элемента, разделённых пробелом:

• Значение fill-rule из SVG — nonzero или evenodd, задающее алгоритм заливки многоугольника.
• Ключевое слово round, за которым следует значение <length>, отделённое пробелом. Оно задаёт скруглённые углы многоугольника; значение <length> определяет радиус скругления.

Каждая пара координат состоит из двух значений <length-percentage>, разделённых пробелом. Эти значения задают координаты вершины многоугольника по осям x и y.

Синтаксис путей

Функция path() задаёт фигуру с помощью правила fill-rule из SVG и описания пути 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%); также выделены различные части блочной модели, отображаемые в инструментах разработчика браузера. В данном случае фигура задана относительно поля отступов.

Вычисленные значения базовых фигур

Значения функции <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> совпадают. Если в свойстве clip-path используется shape(), две фигуры интерполируются также при совпадении значений <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%
    );
  }
}

Результат

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

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

См. также

• Свойства, использующие этот тип данных: border-shape, clip-path, offset-path, shape-outside
• Элементы фигур SVG: <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>
• Обзор фигур CSS
• Фигуры CSS модуль
• Введение в маскирование CSS
• Маскирование CSS модуль
• Редактирование контуров фигур в инструментах разработчика Firefox