Функция CSS `polygon()`

polygon() — это функция CSS, относящаяся к одному из <basic-shape> типов данных. Она используется для рисования многоугольника с помощью одной или нескольких пар координат, каждая из которых задаёт вершину фигуры.

Попробуйте

clip-path: polygon(
  0% 20%,
  60% 20%,
  60% 0%,
  100% 50%,
  60% 100%,
  60% 80%,
  0% 80%
);

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

<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%;
}

Синтаксис

/* Coordinate list */
polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%)
polygon(0px 0px, 200px 100px, 0px 200px)
polygon(0% 0px, 100% 100px, 0px 100%)
polygon(0 0, 50% 1rem, 100% 2vw, calc(100% - 20px) 100%, 0 100%)

/* Coordinate list with fill-rule and/or round value */
polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)
polygon(round 20px, 0% 0%, 50% 50%, 0% 100%)
polygon(evenodd round 2em, 0% 0%, 50% 50%, 0% 100%)

Параметры

Функция polygon() принимает необязательный первый параметр со значениями, изменяющими внешний вид многоугольника: ключевое слово fill-rule, ключевое слово round со значением <length> или оба варианта. Компоненты первого параметра разделяются пробелами. Остальные параметры — разделённые пробелами пары координат x/y, задаваемые значениями <length-percentage>.

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

Ключевое слово, равное nonzero (по умолчанию) или evenodd, которое задаёт алгоритм заполнения фигуры многоугольника.

round <length> Необязательно

Ключевое слово round указывает, что у многоугольника должны быть скруглённые углы, а следующее за ним значение <length> задаёт радиус этих углов.

<length-percentage>

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

Возвращаемое значение

Значение <basic-shape>.

Описание

С помощью функции polygon() можно создать практически любую фигуру, задав координаты x/y её вершин, или точек, в виде разделённых запятыми пар значений <length-percentage>:

polygon(x1 y1, x2 y2, x3 y3, x4 y4, xn yn)

Хотя для создания корректного значения функции polygon() достаточно одной точки, для создания фигуры (треугольника) нужно не менее трёх точек. Верхнего предела для количества указываемых точек нет. Фигура строится по указанным точкам в том порядке, в котором они перечислены в функции. Чтобы замкнуть фигуру, автоматически проводится последняя линия между последней и первой точками.

Координаты треугольника можно задать так:

Эти координаты можно применить к свойству CSS clip-path с помощью функции polygon() следующим образом:

clip-path: polygon(0% 0%, 100% 0%, 100% 100%);

В результате создаётся треугольник, занимающий половину площади родительского контейнера. Для этого задаются координаты трёх из четырёх его углов: верхнего левого (0% 0%), верхнего правого (100% 0%) и нижнего правого (100% 100%). Предположим, что размер контейнера равен 200×200 пикселей, а его фон зелёный:

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: green;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

Влияние порядка точек

Порядок, в котором задаются точки, может привести к созданию разных фигур. Например, в следующих двух объявлениях clip-path используется функция polygon() с парами координат X/Y для четырёх углов контейнера, но в разном порядке.

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 100% 100%);

<div class="box"></div>
<div class="box box2"></div>

body {
  display: flex;
  gap: 20px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: purple;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.box2 {
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 100% 100%);
}

Первая функция рисует квадрат, а вторая — фигуру в форме песочных часов.

Задание модификаторов многоугольника

Функция polygon() принимает необязательный первый параметр, изменяющий отображение результирующей фигуры. Значение параметра может включать один или оба следующих элемента, разделённых пробелом:

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

Например, можно дополнить предыдущий пример с треугольником и скруглить его углы:

clip-path: polygon(round 20px, 0% 0%, 100% 0%, 100% 100%);

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: green;
  clip-path: polygon(round 20px, 0% 0%, 100% 0%, 100% 100%);
}

В результате получится такой же треугольник, но со скруглёнными углами радиусом 20px:

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

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

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

Примеры

Создание треугольника

В этом примере треугольник создаётся путём задания координат трёх его точек.

HTML

<div class="triangle"></div>

CSS

.triangle {
  width: 400px;
  height: 400px;
  background-color: magenta;
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Результат

Координаты треугольника соответствуют верхнему правому углу контейнера (100% 0%), его центральной точке (50% 50%) и нижнему правому углу (100% 100%).

Создание звезды со скруглёнными углами

В этом примере мы создаём звезду и используем ключевое слово round, чтобы скруглить её углы.

HTML

<div class="star"></div>

CSS

.star {
  width: 400px;
  height: 400px;
  background-color: hotpink;
  clip-path: polygon(
    round 20px,
    50% 5%,
    60.85% 27.48%,
    85.22% 21.99%,
    74.38% 44.44%,
    93.88% 60.01%,
    69.57% 65.56%,
    69.53% 90.55%,
    50% 75%,
    30.47% 90.55%,
    30.43% 65.56%,
    6.12% 60.01%,
    25.62% 44.44%,
    14.78% 21.99%,
    39.15% 27.48%
  );
}

@supports not (clip-path: polygon(round 20px, 0% 0%, 100% 0%, 100% 100%)) {
  body::before {
    font-family: sans-serif;
    content: "Your browser does not support the polygon() function's round keyword.";
    background-color: wheat;
    padding: 1rem 0;
    text-align: center;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Результат

Задание многоугольника для shape-outside

В этом примере с помощью свойства shape-outside создаётся фигура, вокруг которой будет обтекать текст.

<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>

.box {
  width: 250px;
}

.shape {
  float: left;
  shape-outside: polygon(
    0 5%,
    15% 12%,
    30% 15%,
    40% 26%,
    45% 35%,
    45% 45%,
    40% 55%,
    10% 90%,
    10% 98%,
    8% 100%,
    0 100%
  );
  width: 300px;
  height: 320px;
}

p {
  font-size: 0.9rem;
}

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

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

См. также

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