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

Этот инструмент генерирует значение CSS clip-path из готовой формы — круг, эллипс, треугольник, пятиугольник, шестиугольник, звезда или скруглённый прямоугольник — и показывает обрезанную форму вживую на окне предпросмотра перед тем, как вы скопируете CSS. Не нужно вручную вычислять координаты polygon() для распространённых форм.

Что это за инструмент?

clip-path — это свойство CSS, скрывающее всё за пределами заданной области элемента, оставляя видимой только форму внутри — остальная часть блока элемента по-прежнему присутствует в разметке, просто не отрисовывается. Оно принимает функции базовых форм, такие как circle(), ellipse(), inset() и polygon(), последняя из которых принимает произвольный список пар координат x/y для описания любой формы с прямыми краями.

Координаты polygon() сложнее всего написать вручную — пятиугольнику, шестиугольнику или звезде нужно несколько точно расположенных точек, и ошибка в одной из них искажает всю форму. Этот инструмент вычисляет эти координаты за вас из готовой формы, мгновенно обновляет живой предпросмотр и выдаёт точный CSS clip-path для копирования.

Источник: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — спецификации, определяющие clip-path и его функции базовых форм.

Зачем его использовать?

Живой предпросмотр обрезает реальный блок предпросмотра под выбранную форму, так что вы видите настоящий результат вместо того, чтобы представлять его по координатам.
Семь готовых форм — круг, эллипс, треугольник, пятиугольник, шестиугольник, звезда и скруглённый прямоугольник — покрывают подавляющее большинство сценариев использования clip-path без ручного написания точек polygon.
Формы круга, эллипса и скруглённого прямоугольника включают ползунок размера/скругления, чтобы точно настроить форму без редактирования координат.
Выдаёт стандартный CSS clip-path, готовый к вставке в любой элемент.
Работает полностью в вашем браузере — ничего из настроенного никуда не загружается. Бесплатно, без регистрации, работает на мобильных.

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

Выберите форму из выпадающего списка — круг, эллипс, треугольник, пятиугольник, шестиугольник, звезда или скруглённый прямоугольник.
Для круга, эллипса и скруглённого прямоугольника настройте ползунок размера/скругления, чтобы точно подстроить обрезку.
Наблюдайте, как окно предпросмотра обновляется вживую при изменении формы или ползунка.
Скопируйте сгенерированный CSS clip-path и вставьте его в элемент, который хотите обрезать.
Для изображения вместо сплошного цвета примените то же свойство clip-path к <img> или элементу с background-image.

Пример

Ввод

Shape: Hexagon

Результат

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Обрезка правильным шестиугольником, часто используется для фото профиля в стиле значка или иконок функций.

Базовые формы против polygon()

Круг, эллипс и inset (скруглённый прямоугольник) — встроенные функции базовых форм CSS с собственным простым синтаксисом: радиус или два, плюс необязательная позиция центра или скругление углов. Треугольник, пятиугольник, шестиугольник и звезда не являются встроенными формами; все они выражаются через polygon() — плоский список пар координат x/y, описывающих контур формы. Этот инструмент автоматически вычисляет эти координаты для правильных (равномерно расположенных) многоугольников и пятиконечной звезды, что и является той самой утомительной частью, которую сложно сделать правильно вручную.

Распространённые шаблоны clip-path

Круглый аватар или значок: circle() со средним радиусом, часто в сочетании с квадратным исходным изображением, чтобы круг не растягивался в эллипс.
Угловой разделитель секций: пользовательский многоугольник (не входит сюда как готовая форма), скашивающий верхний или нижний край секции на всю ширину для непрямоугольного разрыва страницы.
Форма значка звёздного рейтинга или бейджа: готовая форма звезды, полезна как декоративная форма вместо ручного рисования SVG для простых случаев.
Сетка фото-шестиугольников: изображения, обрезанные шестиугольником и расположенные в сотовой раскладке — распространённый паттерн для портфолио или страницы команды.
Скруглённый прямоугольник как лёгкая альтернатива border-radius, когда нужно, чтобы обрезка также отсекала переполняющий дочерний контент, поскольку один только border-radius не обрезает дочерние элементы без дополнительного overflow:hidden.

Сочетание с другими CSS-инструментами

clip-path часто сочетают с CSS-градиентом в качестве обрезаемого фона или с box-shadow, применённым к оборачивающему элементу (поскольку clip-path также обрезает собственную тень элемента, тень на родителе — обычный обходной путь для обрезанной формы, которая всё же должна выглядеть парящей).

→ Генератор градиентов CSS · Генератор border-radius · Генератор box-shadow

Часто задаваемые вопросы

Влияет ли clip-path на размер разметки элемента?

Нет — элемент сохраняет исходный размер и позицию блока для целей разметки; clip-path меняет только то, что отрисовывается. Окружающие элементы располагаются так, как будто обрезка не применялась, что может удивить, если вы ожидаете, что обрезанная форма ведёт себя как элемент с изменённым размером.

Почему box-shadow не отображается на моей обрезанной форме?

clip-path обрезает всю отрисовку элемента, включая любую отбрасываемую им тень, поэтому собственная тень элемента, обрезанного по кругу или многоугольнику, отсекается по границе обрезки. Чтобы получить тень, повторяющую видимую форму, примените box-shadow к необрезанному оборачивающему элементу вокруг обрезанного.

Можно ли анимировать или переходить между формами clip-path?

Да, но только между двумя значениями clip-path одного типа и с одинаковым количеством точек — например, один polygon() с 6 точками, переходящий в другой polygon() с 6 точками. Переход между принципиально разными формами (circle() в polygon()) обычно не анимируется плавно во всех браузерах.

Можно ли использовать clip-path для фоновых изображений, а не только контента элемента?

clip-path обрезает весь элемент целиком — включая его background-image, background-color, границы и контент вместе, а не конкретно фон. Если вы хотите обрезать только фоновое изображение, оставив остальной контент необрезанным, примените clip-path к отдельному элементу, который содержит только фон.

Поддерживается ли clip-path во всех современных браузерах?

Да — clip-path с функциями базовых форм (circle, ellipse, inset, polygon) широко доступен (Baseline) во всех основных браузерах с января 2020 года, согласно данным о совместимости MDN. Обычно его можно безопасно использовать в продакшене без резервного варианта для текущих версий браузеров.