CSS function polygon

Опис

Функція polygon() в CSS використовується для створення полігональних форм для елементів. Вона надає можливість створювати замкнуті многокутники з вказаними координатами вершин. Ці полігональні форми можуть бути використані для створення складних фігур, масок або вирізання частин зображень.

Для визначення полігональної форми використовується функція polygon(), яка може бути встановлена як значення властивостей clip-path або shape-outside. Вона використовує комбінацію координат вершин, які утворюють полігон. Кожна вершина визначається двома значеннями: горизонтальною (x) та вертикальною (y) позицією. З'єднання вершин створює замкнутий многокутник, який і визначає форму полігона.

Ось приклад використання функції polygon():

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

У цьому прикладі ми використовуємо функцію polygon() для визначення полігональної форми для елемента з класом .element. Ми вказуємо координати вершин полігона, встановлюючи значення x та y для кожної вершини. У даному випадку ми задаємо п'ять вершин, що утворюють замкнутий п'ятикутник.

автор: Bond

Нотатка: Функція polygon() надає можливість створювати складні форми, які важко досягти за допомогою інших засобів CSS. Вона дозволяє створювати цікаві геометричні ефекти, а також вирізати області зображень, додавати елементам нові обрізання та форми, що приносять більше гнучкості в дизайні веб-сайту.
автор: Bond

Синтаксис

polygon([fill-rule]? , [<length-percentage> | auto]{2,})

Функція polygon може отримувати 2 значень:

<fill-rule>

nonzero (за замовчуванням) - використовує правило ненульової кривої Безьє.
evenodd - використовує правило парності.

автор: Bond

<length-percentage>

Вказується довжина або відсоток відносно відповідних сторін елемента. Наприклад, 50% або 10px. Приймає також значення auto - розмір вершини визначається автоматично.

автор: Bond