shape()

<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> относится к левому верхнему углу рамки ссылок (значение «абсолютное»).

Примечание: Если координата в <coordinate-pair> задана в процентах, значение вычисляется относительно соответствующей ширины или высоты рамки ссылок.

Могут быть указаны следующие <shape-command>: <move-command>, <line-command>, <hv-line-command>, <curve-command>, <smooth-command>, <arc-command>, и close.

<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] <coordinate-pair> via <coordinate-pair> [<coordinate-pair>]. Эта команда добавляет команду кривой Безье в список команд формы. Ключевые слова by или to определяют, является ли конечная точка кривой, указанная первой <coordinate-pair>, относительной или абсолютной соответственно. Ключевое слово via указывает на контрольные точки кривой Безье.

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

<smooth-command>: Задается как smooth [by | to] <coordinate-pair> [via <coordinate-pair>]. Эта команда добавляет плавную команду кривой Безье в список команд формы. Ключевые слова by или to определяют, является ли конечная точка кривой, указанная первой <coordinate-pair>, относительной или абсолютной, соответственно.

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

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

<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( <'fill-rule'>? from <coordinate-pair> , <shape-command># )  

<fill-rule> = 
  nonzero  |
  evenodd  

<coordinate-pair> = 
  <length-percentage>{2}  

<shape-command> = 
  <move-command>     |
  <line-command>     |
  <hv-line-command>  |
  <curve-command>    |
  <smooth-command>   |
  <arc-command>      |
  close              

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

<move-command> = 
  move <by-to> <coordinate-pair>  

<line-command> = 
  line <by-to> <coordinate-pair>  

<hv-line-command> = 
  [ hline | vline ] <by-to> <length-percentage>  

<curve-command> = 
  curve [ <by-to> <coordinate-pair> using <coordinate-pair>{1,2} ]  

<smooth-command> = 
  smooth [ [ <by-to> <coordinate-pair> ] || [ using <coordinate-pair> ]? ]  

<arc-command> = 
  arc [ [ <by-to> <coordinate-pair> ] || [ of <length-percentage>{1,2} ] || <arc-sweep>? || <arc-size>? || [ rotate <angle> ]? ]  

<by-to> = 
  by  |
  to  

<arc-sweep> = 
  cw   |
  ccw  

<arc-size> = 
  large  |
  small  

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

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

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

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

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

.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);
}

/* Clipping region with curves and smooth transitions and a box */
.shape2 {
  clip-path: shape(
    from 10px 10px,
    curve to 60px 20% via 40px 0,
    smooth to 90px 0,
    curve by -20px 60% via 10% 40px 20% 20px,
    smooth by -40% -10px via -10px 70px,
    close,
    move to 100px 100px,
    hline by 50px,
    vline by 50px,
    hline by -50px,
    close
  );
}

Результат

• clip-path
• offset-path
• Модуль CSS shapes
• Обзор фигур руководство
• Руководство по основным фигурам