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 для кожної вершини. У даному випадку ми задаємо п'ять вершин, що утворюють замкнутий п'ятикутник.
| Нотатка: | Функція |
Синтаксис
polygon([fill-rule]? , [<length-percentage> | auto]{2,})<fill-rule>nonzero(за замовчуванням) - використовує правило ненульової кривої Безьє.evenodd- використовує правило парності.
<length-percentage>Вказується довжина або відсоток відносно відповідних сторін елемента. Наприклад,
50%або10px. Приймає також значенняauto- розмір вершини визначається автоматично.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
37 |
54 |
10.1 |
24 |
79 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
37 |
54 |
10.3 |
Мобільних переглядачів ще не додано.
Приклади
У цьому прикладі ми використовуємо CSS-функцію polygon() для створення вирізаного шматка тексту, що надає йому цікавий вигляд.
Використовується функція polygon() для створення многокутників.