Генератор клип-пути
Создавайте фигуры CSS-путей визуально — без угадывания координат вручную. Выбирайте один из 12 пресетов, перетаскивайте точки полигона в режиме предварительного просмотра и копируйте CSS одним щелчком мыши.
Shape Presets
Live Preview
Drag the dots to reshape. Click + on edges to add points.
Shape Controls
Drag the colored dots on the preview to reshape. 4 points
CSS Output
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Browser support:clip-path is supported in all modern browsers (Chrome, Firefox, Safari 15.4+, Edge). For older Safari (<15.4), use the -webkit-clip-path prefix.
Функции
- Перетаскивание для редактирования: перетаскивайте точки многоугольника прямо в предварительном просмотре, чтобы изменить форму в реальном времени. Не нужно угадывать координаты — посмотрите, как именно выглядит путь к клипу, когда вы его настраиваете.
- 12 предустановленных фигур: начните с обычных фигур: круг, треугольник, ромб, шестиугольник, звезда, сердце и другие. Каждый пресет настроен на лучшую отправную точку и готов к дальнейшей настройке.
- Мгновенный вывод CSS: скопируйте значение пути обрезки CSS или полное объявление одним щелчком мыши. Поддерживаются все современные браузеры без необходимости использования префиксов поставщиков.
- Работает в автономном режиме: вся обработка происходит в вашем браузере — никаких обращений к серверу. Инструмент работает даже без подключения к Интернету после загрузки страницы.
Варианты использования
- Творческая обрезка изображений. Обрезайте изображения в произвольные формы — ромбы, шестиугольники, звезды или многоугольники — для создания уникальных миниатюр портфолио, сеток галереи и визуальных элементов главных разделов.
- Параллакс и анимация прокрутки: добавляйте переходы по траекториям, чтобы отображать элементы при прокрутке пользователем. Анимируйте между многоугольными фигурами для создания плавных современных эффектов, вызываемых прокруткой.
- Разделители карточек и разделов. Используйте диагональные или изогнутые контуры обрезки для создания разделителей разделов между блоками страниц. Лучше, чем преобразования CSS, для поддержки адаптивного макета.
- Рамки профиля и аватара: обрезайте фотографии профиля пользователя в круги, шестиугольники или пользовательские многоугольные рамки для страниц команд, социальных функций и каталогов пользователей.
- Дизайн главного героя и целевой страницы: создавайте привлекательные главные разделы с диагональным разделением, перекрывающимися фигурами и асимметричными контурами клипов, которые направляют взгляд по странице.
- Геометрические ресурсы бренда: создавайте последовательные геометрические формы для иллюстраций бренда, фона значков и декоративных элементов, которые соответствуют идентичности вашего бренда.
Часто задаваемые вопросы
CSS-путь клипа используется для обрезки (скрытия) частей элемента, чтобы была видна только определенная форма. Обычное использование включает в себя: обрезку изображений в произвольные формы (круги, многоугольники, звезды), создание диагональных разделителей разделов, анимацию переходов страниц, создание эффектов наведения и создание элементов геометрического дизайна без SVG или графических ресурсов.
Да! clip-path — это анимируемое свойство. Вы можете использовать переходы CSS или @keyframes для анимации между значениями пути клипа. Для плавного морфинга убедитесь, что оба состояния используют одну и ту же функцию формы с одинаковым количеством точек (например, многоугольник с 6 точками трансформируется в другой многоугольник с 6 точками). Анимация между различными типами фигур (от круга до многоугольника) может интерполироваться не плавно во всех браузерах.
Старое свойство clip (устаревшее) работало только с абсолютно позиционированными элементами и принимало форму rect(). clip-path — это современная замена, которая поддерживает формы круга(), эллипса(), inset(), многоугольника() и пути(), работает с любым позиционированным элементом и полностью анимируется. Всегда используйте clip-path для новых проектов.
Для плавной анимации между полигонами оба полигона должны иметь одинаковое количество точек. Браузер интерполирует положение каждой точки независимо. Например, шестиконечный шестиугольник может плавно трансформироваться в шестиконечную звезду. Если количество точек различается, анимация будет фиксироваться, а не плавно трансформироваться.
Функция path() принимает данные пути SVG (синтаксис атрибута d) для создания полностью пользовательских фигур обрезки. Например: clip-path: path('M 50 0 L 100 50 L 50 100 L 0 50 Z'); создает алмаз. Это дает вам неограниченные возможности создания форм, помимо тех, которые можно создать в виде круга, эллипса, вставки или многоугольника. Примечание: для path() требуется Safari 15.4+.
Нет — clip-path влияет только на визуальную отрисовку элемента. Исходная ограничивающая рамка элемента по-прежнему занимает то же место в макете страницы. В большинстве современных браузеров события (щелчок, наведение курсора) будут срабатывать только в пределах видимой обрезанной области. Для действительно непрямоугольного макета рассмотрите возможность использования фигур CSS или shape-outside.
Для многоугольника, круга, эллипса и вставки: в современных браузерах префикс не требуется (Chrome 55+, Firefox 54+, Safari 11+, Edge 79+). Для path(): Safari 15.4+ без префикса. Для очень старых браузеров вы можете использовать -webkit-clip-path в качестве запасного варианта. Инструмент выводит стандартный путь клипа без префикса, который работает во всех современных браузерах.
Да! clip-path можно применить к любому элементу HTML, включая текст. Вы можете обрезать текст в определенные фигуры, но сам текст будет обрезан, а не перекомпонован. Для текста, следующего за контуром или фигурой, вместо этого используйте фигуры CSS с shape-outside. Популярное использование — создание текстовых анимаций с морфингом пути клипа.