Генератор CSS Clip-path
Генератор CSS clip-path створює значення clip-path для поширених фігур — трикутника, стрілки, п’ятикутника, шестикутника, зірки, шеврона, кола, еліпса й заокругленого inset — з живим переглядом.
Про цей інструмент
Генератор CSS clip-path створює значення clip-path для поширених фігур — трикутника, стрілки, п’ятикутника, шестикутника, зірки, шеврона, кола, еліпса й заокругленого inset — з живим переглядом.
Як користуватися
- Виберіть фігуру зі списку.
- Виберіть колір заливки для перегляду.
- Натисніть «Копіювати CSS» і застосуйте clip-path до будь-якого елемента чи зображення.
Корисно знати
- clip-path приховує все, що за межами фігури, тож маска-зображення чи SVG-файл не потрібні.
- polygon() приймає список точок x y у відсотках, які масштабуються разом з елементом.
- circle(50% at 50% 50%) обрізає елемент до кола по центру.
- inset() з round додає заокруглені кути до прямокутної обрізки.
- Базові фігури clip-path підтримують усі сучасні основні браузери.
Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.
Поширені запитання
Як обрізати зображення у формі фігури за допомогою CSS?
Застосуйте до зображення clip-path, наприклад clip-path: polygon(50% 0%, 0% 100%, 100% 100%); для трикутника.
Чим clip-path відрізняється від mask?
clip-path вирізає векторну фігуру з чіткими краями. mask використовує зображення або градієнт і може створювати м’які, частково прозорі краї.
Чи можна анімувати clip-path?
Так, якщо обидві фігури використовують ту саму функцію й однакову кількість точок, браузер плавно перейде між ними.
Чи впливає clip-path на кліки?
Так. Ділянки поза обрізаною фігурою не відображаються й не отримують подій вказівника.