Developer Tools
Design Tools
Web UtilitiesГенератор CSS Clip Path
Создавайте CSS clip-path для полигонов, кругов и эллипсов с помощью визуального редактора с функцией перетаскивания. Используйте пресеты для таких форм, как стрелки, треугольники и звёзды. Скопируйте CSS мгновенно.
Точка 1
Точка 2
Точка 3
Точка 4
Свойство CSS
.element {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}Значение CSS
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)Похожие инструменты
Об этом инструменте
Как это работает
- Выберите тип формы: полигон, круг или эллипс
- Перетащите контрольные точки на холсте предпросмотра для изменения clip path
- Настройте параметры с помощью ползунков и полей ввода для точного контроля
- Скопируйте сгенерированное значение CSS clip-path для использования в таблицах стилей
- Используйте пресеты для распространённых форм: стрелок, треугольников и звёзд
- Просматривайте clip path применённый к изображению или фону с однотонным цветом
Распространённые варианты использования
- Создание нестандартных обрезок изображений для hero-секций
- Построение диагональных или шевронных разделителей секций
- Проектирование аватаров или значков в форме полигона
- Создание геометрических масок изображений для галерей
- Создание кнопок призыва к действию в форме стрелки
- Проектирование карточек UI и тултипов нестандартной формы
Часто задаваемые вопросы
Что такое CSS clip-path?
Свойство CSS clip-path позволяет задать область обрезки для элемента — видима только та часть, которая находится внутри этой области. Поддерживает формы polygon(), circle(), ellipse() и path(), позволяя создавать непрямоугольные элементы, диагональные разделители и геометрические маски.
Как перетаскивать контрольные точки в предпросмотре?
При выборе типа формы «Полигон» на холсте предпросмотра появляются синие круговые маркеры в каждой вершине. Нажмите и перетащите любой маркер для изменения его позиции. CSS-вывод обновляется мгновенно.
Что означают проценты X и Y?
Координаты полигона clip-path выражаются в процентах от ширины и высоты элемента. 0% 0% — верхний левый угол, 100% 0% — верхний правый, 100% 100% — нижний правый, 0% 100% — нижний левый.
Как добавить или удалить точки полигона?
Используйте кнопку «+ Добавить точку», чтобы добавить новую контрольную точку в центре (50% 50%), затем перетащите её или отредактируйте значения X/Y. Для удаления нажмите «− Удалить» рядом с точкой. Полигон требует минимум 3 точки.
Какие пресеты форм доступны?
Инструмент включает 12 пресетов полигонов: Треугольник, Ромб, Стрелка вправо, Стрелка влево, Пятиугольник, Шестиугольник, Звезда, Шеврон, Наклон влево, Наклон вправо, Фаска и Паз.
Как работает clip-path для круга?
При выборе типа «Круг» генерируется значение clip-path: circle(r% at cx% cy%). Ползунок радиуса управляет размером круга, а ползунки центра X/Y перемещают его центр.
В чём разница между кругом и эллипсом?
Clip-path круга принимает один радиус, создавая идеально круглую форму обрезки. Clip-path эллипса принимает отдельные радиусы X (rx) и Y (ry), позволяя создавать овальные формы.
Как скопировать сгенерированный CSS?
В разделе «Вывод CSS» есть две кнопки. «Копировать CSS» копирует полное правило CSS с селектором .element. «Копировать значение» копирует только значение clip-path для вставки в существующее правило.
Поддерживается ли clip-path во всех браузерах?
CSS clip-path с базовыми формами хорошо поддерживается во всех современных браузерах: Chrome, Firefox, Safari и Edge. Свойство не требует вендорных префиксов для базовых форм.
Можно ли анимировать формы clip-path?
Да! CSS clip-path можно плавно переходить и анимировать между формами одного типа с одинаковым количеством точек. Например: "transition: clip-path 0.4s ease".
Как использовать clip-path для разделителей секций?
Примените clip-path полигон к полноширинному элементу секции для создания диагональных или V-образных переходов. Используйте пресеты «Наклон влево» или «Наклон вправо» как отправную точку.
Что такое опция фонового изображения предпросмотра?
При переключении фона предпросмотра на «Изображение», предпросмотр заполняется градиентом (индиго-розовый) вместо однотонного цвета. Это помогает увидеть, как clip-path будет выглядеть на фото или богатом фоне.