Виводимо CSS форми на новий рівень
Створюємо багатокутник
Крім простих форм типу кола та трикутника, можна створювати і багатокутники – фігури з безліччю сторін (зазвичай 5 і більше), такі як п'ятикутник та шестикутник. Нам знадобиться CSS функція polygon(), яка набуває кількох значень, розділених комою. Значення – це координати:
У коді вище додано 5 координат, які формують п'ятикутник. Якщо додати ще одну координату, фігура перетвориться на шестикутник, семикутник, восьмикутник і т.д.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Створити багатокутник набагато складніше, ніж створити коло або еліпс, особливо якщо це складний багатокутник з безліччю координат. На наше щастя, є дуже зручний інструмент, який робить створення CSS форм інтуїтивнішим.
Робота з CSS Shapes Editor
CSS Shapes Editor – розширення для Chrome. Після встановлення панелі розробника додається нова вкладка Shapes на вкладці Elements, вбудована з іншими вкладками (Styles, Computer і т.д.).
Поки ми малюємо, розширення оновлює координати фігури функції і відразу вставляє їх у вигляді інлайнових стилів в елемент. Після створення фігури можна скопіювати отриманий код у свої стилі.
Ця техніка дозволяє з легкістю малювати будь-які фігури та застосовувати їх на сторінці, наприклад:
Вилучення форми із зображення
Серед інших значень властивості shape-outside є функція url(). Така сама функція, якою ми скрізь користуємося в CSS для вставки фонового зображення. У нашому випадку функція url() дозволяє властивості shape-outside задавати фігуру на основізображення.
Якщо ви хочете гладко пустити контент навколо складної графіки з безліччю кривих та кутів, замість polygon() необхідно використовувати url(). Також даний спосіб краще використовувати при роботі з контентом користувача, де складно визначити форму.
Візьмемо папугу ара із сайту Unsplash. Спочатку потрібно створити зображення з прозорим фоном, наприклад:
Вихідне зображення папуги додається до контейнера у вигляді фону: