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

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

Синтаксис

/* <fill-rule> */
clip-path: shape(nonzero from 0 0, line to 10px 10px);

/* <move-command>, <line-command>, and close */
offset-path: shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close);

/* <hvline-command> */
offset-path: shape(from 10px 10px, hline by 50px, vline to 5rem);

/* <curve-command> */
offset-path: shape(
  from 10px 10px,
  curve to 80px 80px with 160px 1px / 20% 16px
);

/* <smooth-command> */
offset-path: shape(from 10px 10px, smooth to 100px 50pt);

/* <arc-command> */
offset-path: shape(
  from 5% 0.5rem,
  arc to 80px 1pt of 10% ccw large rotate 25deg
);

/* Using a CSS math function */
offset-path: shape(
  from 5px -5%,
  hline to 50px,
  vline by calc(0% + 160px),
  hline by 70.5px,
  close,
  vline by 60px
);

clip-path: shape(
  evenodd from 10px 10px,
  curve to 60px 20% with 40px 0,
  smooth to 90px 0,
  curve by -20px 60% with 10% 40px / 20% 20px,
  smooth by -40% -10px with -10px 70px,
  close
);

Параметры

<fill-rule> Необязательный

Задаёт способ заливки перекрывающихся областей фигуры. Возможны следующие значения:

• nonzero: точка считается находящейся внутри фигуры, если луч, проведённый из этой точки, пересекает больше сегментов пути слева направо, чем справа налево, в результате чего получается ненулевое число. Это значение используется по умолчанию, если <fill-rule> не задан.

• evenodd: точка считается находящейся внутри фигуры, если луч, проведённый из этой точки, пересекает нечётное количество сегментов пути. Это означает, что каждый раз, когда луч входит в фигуру, он не выходит из неё столько же раз, поэтому число пересечений входа без соответствующих пересечений выхода является нечётным.

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

from <coordinate-pair>

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

<shape-command>

Задаёт один или несколько разделённых запятыми команд, определяющих фигуру; синтаксис похож на синтаксис команд пути SVG. К командам относятся <move-command>, <line-command>, <hv-line-command>, <curve-command>, <smooth-command>, <arc-command> и close. Начальная точка каждой команды — конечная точка предыдущей команды, а первая точка фигуры задаётся параметром from <coordinate-pair>.

Команды фигуры

Синтаксис большинства команд фигуры состоит из ключевого слова, задающего инструкцию, например move или line, за которым следуют ключевое слово by или to и набор координат.

• by: указывает, что <coordinate-pair> отсчитывается относительно начальной точки команды (относительное значение).
• to: указывает, что <coordinate-pair> отсчитывается относительно верхнего левого угла опорного блока (абсолютное значение).

Можно задать следующие <shape-command>:

<move-command>

Задаётся как move [by | to] <coordinate-pair>. Эта команда добавляет в список команд фигуры команду MoveTo. Она ничего не рисует, а задаёт начальное положение для следующей команды. Ключевое слово by или to указывает, является ли точка <coordinate-pair> относительной или абсолютной соответственно. Если за командой <move-command> следует команда close, она задаёт начальную точку следующей фигуры или подпути.

<line-command>

Задаётся как line [by | to] <coordinate-pair>. Эта команда добавляет в список команд фигуры команду LineTo. Она рисует прямую линию от начальной точки команды до её конечной точки. Ключевое слово by или to указывает, является ли конечная точка, заданная посредством <coordinate-pair>, относительной или абсолютной соответственно.

<hv-line-command>

Задаётся как [hline | vline] [by | to] <length-percentage>. Эта команда добавляет в список команд фигуры горизонтальную (hline) или вертикальную (vline) команду LineTo. С помощью hline от начальной точки команды проводится горизонтальная линия to или by до позиции x, заданной посредством <length-percentage>. С помощью vline от начальной точки команды проводится вертикальная линия to или by до позиции y, заданной посредством <length-percentage>. Ключевое слово by или to задаёт относительную или абсолютную конечную точку соответственно. Эта команда эквивалентна <line-command>, где одно значение координаты задаётся единственным <length-percentage>, а другое остаётся неизменным относительно начальной точки команды.

<curve-command>

Задаётся как curve [by | to] <end-point> with <control-point> [/ <control-point>]. Эта команда добавляет в список команд фигуры команду кривой Безье. Ключевое слово by или to определяет, является ли конечная точка кривой, заданная посредством <end-point>, относительной или абсолютной.

Ключевое слово with задаёт контрольные точки кривой Безье следующим образом.

• Если задана только одна <control-point>, команда рисует квадратичную кривую Безье, определяемую тремя точками (начальной точкой, контрольной точкой и конечной точкой).
• Если заданы два значения <control-point>, команда рисует кубическую кривую Безье, определяемую четырьмя точками (начальной точкой, двумя контрольными точками и конечной точкой).

Допустимые значения для <end-point>:

position ключевые слова или <coordinate-value-pair>

Можно использовать, если конечная точка кривой абсолютная (задана с помощью to).

<coordinate-value-pair>

Можно использовать, если конечная точка кривой относительная (задана с помощью by).

Допустимые значения для <control-point>:

position

Задаёт ключевое слово позиции. Это значение допустимо только в том случае, если конечная точка кривой абсолютная (задана с помощью to).

<coordinate-value-pair>

Задаёт пару значений <length-percentage>, определяющих координаты.

<relative-control-point>

Задаёт <coordinate-value-pair>, за которым следует ключевое слово from и одно из следующих ключевых слов:

start

Указывает, что контрольная точка отсчитывается относительно начальной точки текущей команды.

end

Указывает, что контрольная точка отсчитывается относительно конечной точки текущей команды.

origin

Указывает, что контрольная точка отсчитывается относительно верхней левой точки (начала координат) контейнера, внутри которого рисуется фигура.

Примечание: если ключевые слова <relative-control-point> не заданы и <control-point> становится обычным <coordinate-value-pair>, координаты отсчитываются от начала кривой. Другими словами, start используется по умолчанию.

<smooth-command>

Задаётся как smooth [by | to] <end-point> [with <control-point>]. Эта команда добавляет в список команд фигуры команду плавной кривой Безье. Ключевое слово by или to определяет, является ли конечная точка кривой, заданная посредством <end-point>, относительной или абсолютной.

Ключевое слово with задаёт необязательную контрольную точку кривой Безье:

• Если with <control-point> не задано, команда рисует плавную квадратичную кривую Безье, которая использует предыдущую контрольную точку и текущую конечную точку для определения кривой.
• Если указано необязательное ключевое слово with, оно задаёт контрольные точки кривой посредством <control-point> и рисует плавную кубическую кривую Безье, определяемую предыдущей контрольной точкой, текущей контрольной точкой и текущей конечной точкой.

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

Допустимые значения компонентов <end-point> и <control-point> совпадают со значениями для <curve-command>.

<arc-command>

Задаётся как arc [by | to] <coordinate-pair> of <length-percentage> [<length-percentage>] [<arc-sweep> | <arc-size> | rotate <angle>]. Эта команда добавляет в список команд фигуры команду эллиптической дуги. Она рисует эллиптическую дугу между начальной и конечной точками. Ключевое слово by или to определяет, является ли конечная точка кривой, заданная первой <coordinate-pair>, относительной или абсолютной соответственно.

Команда эллиптической дуги определяет два возможных эллипса, проходящих через обе начальную и конечную точки. Каждый из них можно обойти по часовой стрелке или против часовой стрелки, что даёт четыре возможные дуги в зависимости от размера, направления и угла дуги. Ключевое слово of задаёт размер эллипса, частью которого является дуга: первая <length-percentage> задаёт горизонтальный радиус эллипса, а вторая <length-percentage> — вертикальный.

Укажите следующие параметры, чтобы выбрать одну из четырёх дуг:

• <arc-sweep>: указывает, проходит ли нужная дуга по эллипсу по часовой стрелке (cw) или против часовой стрелки (ccw). Если параметр не задан, используется значение ccw.
• <arc-size>: указывает, является ли нужная дуга большей (large) или меньшей (small) из двух дуг. Если параметр не задан, используется значение small.
• <angle>: задаёт угол поворота эллипса относительно оси X в градусах. Положительный угол поворачивает эллипс по часовой стрелке, а отрицательный — против часовой стрелки. Если параметр не задан, используется значение 0deg.

Особые случаи обрабатываются следующим образом:

• Если задана только одна <length-percentage>, одно и то же значение используется для горизонтального и вертикального радиусов, что фактически создаёт окружность. В этом случае <arc-size> и <angle> не оказывают влияния.
• Если любой из радиусов равен нулю, команда эквивалентна <line-command> к конечной точке.
• Если любой из радиусов отрицательный, вместо него используется его абсолютное значение.
• Если горизонтальный и вертикальный радиусы задают эллипс, недостаточно большой для пересечения начальной и конечной точек (после поворота на заданный <angle>), радиусы равномерно увеличиваются до размера, при котором эллипс начинает пересекать обе точки.
• Если начальная и конечная точки дуги расположены на строго противоположных сторонах эллипса, возможен только один эллипс и две дуги. В этом случае <arc-sweep> задаёт нужную дугу, а <arc-size> не оказывает влияния.

close

Добавляет в список команд фигуры команду ClosePath, рисуя прямую линию от текущей позиции (конца последней команды) до первой точки пути, заданного параметром from <coordinate-pair>. Чтобы замкнуть фигуру без рисования линии, перед командой закрытия укажите <move-command> с исходными координатами. Если за командой close сразу следует <move-command>, она задаёт начальную точку следующей фигуры или подпути.

Описание

Функция shape() позволяет задавать сложные фигуры. В нескольких отношениях она похожа на функцию фигур path():

• Параметр <fill-rule> функции shape() работает точно так же, как одноимённый параметр функции path().
• Для функции shape() необходимо задать одну или несколько <shape-command>, каждая из которых использует соответствующую команду пути, например MoveTo, LineTo и ClosePath.

Однако shape() имеет ряд преимуществ по сравнению с path():

• shape() использует стандартный синтаксис CSS, что упрощает создание и изменение фигур непосредственно в таблице стилей. В свою очередь, path() использует синтаксис пути SVG, который менее интуитивен для тех, кто не знаком с SVG.
• shape() поддерживает различные единицы CSS, включая проценты, rem и em. path(), напротив, задаёт фигуры одной строкой и ограничивает единицы значением px.
• shape() также позволяет использовать математические функции CSS, например calc(), max() и abs(), что делает задание фигур более гибким.

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

Примеры

Использование shape() для задания пути

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

Первая фигура, shape1, следует по пути кубической кривой Безье, заданному командой curve to. Затем команда close рисует прямую линию от конечной точки кривой обратно к начальной точке, заданной командой from. Наконец, shape1 перемещается в новую позицию 0px 150px, а затем продолжает движение по горизонтальной линии.

Вторая фигура, shape2, сначала движется по горизонтальной линии, а затем возвращается в начальную позицию 50px 90px. Далее она движется по вертикальной линии, прежде чем замкнуть путь в начальной точке.

Обе фигуры начинают с исходных цветов и постепенно меняют их на hotpink к концу анимации move, а при её повторном запуске возвращаются к исходному цвету. Это циклическое изменение цвета наглядно показывает ход анимации и её перезапуск.

<div class="container">
  Using <code>&lt;curve-command&gt;</code>
  <div class="shape shape1">>></div>
</div>

<div class="container">
  Using <code>&lt;move-command&gt;</code> and
  <code>&lt;hvline-command&gt;</code>
  <div class="shape shape2">>></div>
</div>

body {
  align-items: center;
  justify-content: center;
  display: flex;
}

.container {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 250px;
  border: 2px dotted green;
  margin: 20px;
}

@supports not (offset-path: shape(from 0 0, move to 0 0)) {
  body::after {
    content: "Your browser doesn't support the `shape()` function yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

.shape {
  width: 50px;
  height: 50px;
  background: #2bc4a2;
  position: absolute;
  text-align: center;
  line-height: 50px;
  animation: move 6s infinite linear;
}

.shape1 {
  offset-path: shape(
    from 30% 60px,
    curve to 180px 180px with 90px 190px,
    close,
    move by 0px 150px,
    hline by 40%
  );
}

.shape2 {
  offset-path: shape(
    from 50px 90px,
    hline to 8em,
    move to 50px 90px,
    vline by 20%,
    close
  );
}

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

Результат

Использование shape() для определения видимой части элемента

В этом примере показано, как функцию shape() можно использовать в свойстве clip-path, чтобы создавать различные фигуры области обрезки. Первая фигура (shape1) — треугольник, заданный прямыми линиями. Вторая фигура (shape2) включает кривые и плавные переходы; в ней также показано использование <move-command> после команды close, которая добавляет в область обрезки прямоугольную фигуру.

<div class="container">
  <div class="shape shape1"></div>
</div>

<div class="container">
  <div class="shape shape2"></div>
</div>

body {
  align-items: center;
  justify-content: center;
  display: flex;
}

.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 20px;
  background-color: lightgray;
}

@supports not (clip-path: shape(from 0 0, move to 0 0)) {
  body::after {
    content: "Your browser doesn't support the `shape()` function yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

.shape {
  width: 100%;
  height: 100%;
  background: #2bc4a2;
  position: absolute;
  text-align: center;
  line-height: 50px;
}

/* Triangular clipping region */
.shape1 {
  clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
}

/* A Heart clipping region using curve and arc transitions
   and a box using hline and vline transitions */
.shape2 {
  clip-path: shape(
    from 20px 70px,
    arc to 100px 70px of 1% cw,
    arc to 180px 70px of 1% cw,
    curve to 100px 190px with 180px 130px,
    curve to 20px 70px with 20px 130px,
    close,
    move to 150px 150px,
    hline by 40px,
    vline by 40px,
    hline by -40px,
    close
  );
}

Результат

Использование shape() для рисования кривых с относительными контрольными точками

Как и в предыдущих примерах, здесь используется clip-path для создания различных фигур областей обрезки элементов. Фигуры задаются сочетанием <curve-command> и <smooth-command>, а контрольные точки указываются с помощью значений <relative-control-point>.

Первая фигура (shape1) состоит из двух кубических кривых Безье.

• Первая кривая начинается в центре левого края блока и проводится до точки 200px по оси X — центра правого края блока. Для неё используются одна контрольная точка относительно начала кривой и одна контрольная точка относительно начала координат (верхнего левого угла блока).
• Вторая кривая начинается в центре правого края блока и проводится -200px по оси X — до центра левого края блока. Для неё используются одна контрольная точка относительно начала координат и одна контрольная точка относительно начала кривой.

<div class="container">
  <div id="shape1"></div>
  <div id="shape2"></div>
  <div id="shape3"></div>
</div>

.container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

@supports not (
  clip-path: shape(
      from center left,
      curve by 200px 0 with 50% -50% from start / 50% 0 from origin,
      curve by -200px 0 with 50% 100% from origin / -50% 50% from start,
      close
    )
) {
  body::after {
    content: "Your browser doesn't support `shape()` relative control points.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

#shape1 {
  width: 200px;
  height: 200px;
  background: green;
  clip-path: shape(
    from center left,
    curve by 200px 0 with 50% -50% from start / 50% 0 from origin,
    curve by -200px 0 with 50% 100% from origin / -50% 50% from start,
    close
  );
}

Вторая фигура (shape2) состоит из одной квадратичной и одной кубической кривой Безье.

• Первая кривая начинается в центре левого края блока и проводится до абсолютной точки, расположенной 200px от начала координат по оси X и 100px от начала координат по оси Y. Для неё используется одна контрольная точка относительно начала кривой.
• Вторая кривая начинается в конечной точке предыдущей кривой и проводится до центра левого края блока. Для неё используются одна контрольная точка относительно начала кривой и одна контрольная точка относительно конечной точки.

#shape2 {
  width: 200px;
  height: 200px;
  background: purple;
  clip-path: shape(
    from center left,
    curve to 200px 100px with 50% -80% from start,
    curve to center left with 0% 70% from start / 20% 0% from end,
    close
  );
}

Третья фигура (shape3) состоит из одной квадратичной и одной кубической кривой Безье, заданной командой smooth.

• Первая кривая начинается в центре левого края блока и проводится до точки 200px по оси X. Для неё используется одна контрольная точка относительно начала кривой.
• Вторая кривая начинается в конечной точке предыдущей кривой и проводится до центра блока. Для неё используются одна контрольная точка относительно начала кривой (последняя контрольная точка предыдущей кривой) и одна контрольная точка относительно начала координат.

#shape3 {
  width: 200px;
  height: 200px;
  background: orangered;
  clip-path: shape(
    from center left,
    curve by 200px 0px with 50% -80% from start,
    smooth to center with 50% 100% from origin,
    close
  );
}

Результат

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

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

См. также

• border-shape
• clip-path
• offset-path
• Модуль фигур CSS
• Руководство «Обзор фигур»
• Руководство «Базовые фигуры»