polygon()

/* Specified as coordinate list */
/* polygon(<length-percentage> <length-percentage>, ... )*/
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%)

/* Specified as coordinate list and fill rule*/
/* polygon(<fill-rule> <length-percentage> <length-percentage>, ... )*/
polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)
polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)

Параметры polygon() разделены запятыми и необязательными пробелами. Первый параметр — необязательное значение <fill-rule>. Дополнительные параметры — точки, определяющие многоугольник. Каждая точка представляет собой пару значений координат x/y <length-percentage>, разделённых пробелом, например, "0 0" и "100% 100%" для левого верхнего и правого нижнего углов соответственно.

Примечание: Элемент SVG <polygon> имеет отдельные атрибуты для fill-rule и points, а CSS polygon() гибко относится к использованию пробелов и запятых в качестве разделителей. Правила для разделителей в CSS polygon() строго соблюдаются.

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

Необязательное значение nonzero (значение по умолчанию при пропуске) или evenodd, которое определяет правило заполнения.

<length-percentage>

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

Возвращает значение <basic-shape>.

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

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

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

Учитывая вышесказанное, отображение координат контейнера можно представить так:

Применение этих координат к свойству CSS clip-path с помощью функции polygon():

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

Это создаст прямоугольник размером с его родительский контент, задав координаты четырёх углов: верхний левый (0% 0%), верхний правый (100% 0%), нижний правый (100% 100%) и нижний левый (0% 100%).

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

<fill-rule> = 
  nonzero  |
  evenodd  

<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%) контейнера.

В этом примере создаётся фигура для следования текста с помощью свойства 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;
}

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