Генератор путей обрезки CSS

Создавайте многоугольники и формируйте контуры с помощью интерактивного предварительного просмотра. Отлично подходит для фигур героев и масок изображений.

CSS Clip Path Generator

Live

Shape

CSS output

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Key capabilities

Создавайте многоугольники и формируйте контуры с помощью интерактивного предварительного просмотра.
Запускается в вашем браузере
Бесплатное использование

Как пользоваться

Выберите предустановленную форму или точки многоугольника.
При необходимости откорректируйте точки.
Скопируйте CSS-пути клипа.

How this tool works

Выберите предустановленную форму или точки многоугольника.
При необходимости откорректируйте точки.
Скопируйте CSS-пути клипа.

Recommended settings

Сначала используйте параметры по умолчанию, затем при необходимости измените их.

Supported formats

Text / on-page input

File size and limits

Очень сложные многослойные предварительные просмотры могут работать медленнее на старых телефонах.

Privacy

Генераторы цвета и CSS полностью работают в вашем браузере. Предварительный просмотр и преобразование никогда не загружают ваши стили.

Common use cases

Используйте CSS Clip Path Generator, когда вам нужно: Создавайте многоугольники и формируйте пути обрезки с помощью интерактивного предварительного просмотра.

Troubleshooting

Предварительный просмотр выглядит по-другому после вставки

Проверьте наличие конкурирующих CSS на вашей странице (сбросы, унаследованные цвета). Сначала скопируйте сгенерированное правило в изолированную таблицу стилей.

FAQ

Это загружает мой CSS?

Нет. Генераторы и преобразователи запускаются в вашем браузере с предварительным просмотром в реальном времени.

Нужен ли мне аккаунт?

Нет. Откройте инструмент, настройте элементы управления и скопируйте CSS.