Інструмент для розробників

Генератор clip-path

Виберіть форму, налаштуйте її й скопіюйте CSS. Зображення не потрібне.

Генератор clip-path Працює на вашому пристрої

Працює у вашому браузері — ваш текст нікуди не надсилається
Без реєстрації та квот, безкоштовно користуйтеся скільки завгодно

Як це працює

clip-path обрізає елемент до контуру. Усе поза формою не малюється й не клікається, що робить її справжньою формою, а не зображенням форми, — і це працює для будь-якого елемента, зокрема зображень і відео.

Відсотки, а не пікселі

Точки багатокутника задаються у відсотках від власної ширини й висоти елемента, тож форма розтягується разом з елементом, а не ламається за іншого розміру. Саме це робить її придатною для адаптивної розмітки.

Кліки слідують за формою

Саме це відрізняє clip-path від декоративного накладення. Обрізана ділянка взагалі не отримує подій вказівника, тож трикутна кнопка трикутна і для миші, і для ока.

Анімація між формами

Багатокутник може плавно переходити в інший багатокутник лише якщо в обох однакова кількість точок. Звичайний прийом — доповнити простішу форму дубльованими точками для збігу кількості — трикутник, записаний чотирма точками, дві з яких в одному місці, може перетворитися на квадрат.

Рядок -webkit-

Сучасним браузерам потрібна лише властивість без префікса. Копія з префіксом включена, бо деякі старіші версії Safari досі її вимагають, а залишити її нічого не коштує.

Чого він не робить

Він обрізає; він не перекомпоновує. Навколишній текст усе ще розглядає елемент як його початковий прямокутник. Щоб текст обтікав форму, потрібен shape-outside, який має той самий синтаксис.

Запитання й відповіді