CSS clip-path: как создавать фигурные маски для элементов

clip-path — свойство CSS, позволяющее обрезать элемент по произвольной форме. В отличие от border-radius, который лишь скругляет углы, clip-path создаёт любые геометрические и полигональные маски: треугольники, шестиугольники, волны, органические формы. Это мощный инструмент для современного веб-дизайна — от декоративных карточек до анимированных переходов и креативных галерей.

Для визуальной настройки масок используйте Генератор clip-path на reChecker.

Синтаксис clip-path

Свойство принимает несколько типов значений — базовые геометрические формы и полигоны с координатами.

polygon()

Задаёт маску в виде многоугольника. Координаты указываются в процентах или пикселях относительно элемента. Первая точка соединяется с последней автоматически.

/* Треугольник */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

/* Шестиугольник */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

/* Скошенная карточка */
clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);

Координаты идут парами x y. Начало координат — левый верхний угол элемента. 0% 0% — верхний левый, 100% 100% — нижний правый.

circle()

Круглая маска. Синтаксис: circle(radius at x y).

/* Круг по центру, радиус 50% */
clip-path: circle(50% at 50% 50%);

/* Круг в правом нижнем углу */
clip-path: circle(30% at 100% 100%);

/* Фиксированный радиус в пикселях */
clip-path: circle(80px at center center);

Позиция по умолчанию — center. Радиус в процентах считается от диагонали элемента (по спецификации sqrt(width² + height²) / sqrt(2)).

ellipse()

Эллиптическая маска. Синтаксис: ellipse(rx ry at x y).

/* Эллипс по центру */
clip-path: ellipse(50% 30% at 50% 50%);

/* Горизонтальный овал */
clip-path: ellipse(60% 25% at center center);

inset()

Прямоугольная маска со скруглёнными углами. Синтаксис: inset(top right bottom left round radius).

/* Прямоугольник с отступами */
clip-path: inset(10% 20% 10% 20%);

/* С скруглением */
clip-path: inset(10% 10% 10% 10% round 20px);

Порядок значений как у margin — по часовой стрелке с верха.

Практические примеры

Карточка с диагональным срезом

.card {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

Волнообразный нижний край

.wave {
  clip-path: polygon(
    0 0, 100% 0, 100% 70%,
    80% 85%, 60% 70%, 40% 85%, 20% 70%, 0 85%
  );
}

Ромб для аватара

.avatar-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Вырез под логотип (notch)

.notch {
  clip-path: polygon(
    0 0, 20% 0, 20% 20%, 80% 20%, 80% 0, 100% 0,
    100% 100%, 0 100%
  );
}

Звёзды и многоугольники

Для декоративных элементов — звёзд, шестиугольников — polygon идеален. Координаты считаются от центра или подбираются визуально. Например, пятиконечная звезда требует 10 точек (5 внешних и 5 внутренних). Для таких форм Генератор clip-path на reChecker существенно ускоряет работу.

Обрезка изображений под контент

Картинки в галереях или на карточках часто обрезают под нестандартную форму. clip-path на img или обёртке создаёт единый визуальный стиль без дополнительных изображений в редакторе.

Анимации с clip-path

clip-path анимируется через transition и animation. Это позволяет создавать плавные морфинги форм и креативные переходы.

.card {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.4s ease;
}

.card:hover {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
}

Морфинг между разными polygon:

@keyframes morph {
  0%   { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); }
  50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); }
}

.shape {
  animation: morph 4s ease-in-out infinite;
}

Важно: количество точек в polygon при анимации должно совпадать, иначе переход будет некорректным.

Поддержка браузеров

clip-path поддерживается во всех современных браузерах (Chrome 55+, Firefox 54+, Safari 9.1+, Edge 79+). Для старых версий Safari может потребоваться префикс -webkit-clip-path. В IE свойство не поддерживается — используйте @supports для fallback:

.card {
  border-radius: 12px; /* fallback */
}

@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  .card {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  }
}

Производительность

clip-path обрабатывается композитным слоем. Для анимируемых элементов браузер создаёт отдельный слой — это обычно эффективно. Рекомендации:

• Избегайте анимации clip-path на многих элементах одновременно (десятки и сотни)
• Предпочитайте polygon с небольшим числом точек — сложные пути дороже в рендеринге
• Используйте will-change: clip-path только при необходимости и снимайте после анимации

Инструмент clip-path на reChecker

Генератор clip-path на reChecker позволяет:

• Визуально создавать polygon, circle, ellipse, inset
• Редактировать координаты с живым предпросмотром
• Копировать готовый CSS одной кнопкой
• Экспериментировать с формами без ручного расчёта координат

Удобно для быстрого прототипирования и подбора фигур под дизайн. При изменении значений результат обновляется мгновенно. Координаты polygon можно вводить вручную или двигать точки на визуальном редакторе — это экономит время при создании сложных форм.

clip-path vs другие методы

Метод	Когда использовать
border-radius	Простое скругление углов, круги, pill
clip-path	Произвольные формы, анимации морфинга
mask-image	Градиентные маски, сложные альфа-каналы
SVG clipPath	Очень сложные пути, переиспользование

Для большинства декоративных форм clip-path — оптимальный выбор: нативный CSS, хорошая производительность, простая анимация. При необходимости комбинируйте с border-radius и overflow: hidden — они работают независимо и могут дополнять друг друга в разных сценариях.

Использование с SVG

clip-path может ссылаться на SVG-элемент clipPath через url(). Это позволяет использовать сложные пути из векторной графики:

.clipped {
  clip-path: url(#myClipPath);
}

В SVG определяется элемент <clipPath id="myClipPath"> с путями. Такой подход подходит для очень сложных форм, импортированных из дизайн-инструментов.

Рекомендации

1. Доступность — обрезанный контент остаётся в DOM; убедитесь, что важный текст не обрезается на малых экранах
2. Контраст — фигурные края могут накладываться на фон; проверяйте читаемость
3. overflow — clip-path обрезает визуально; overflow: hidden на родителе может дополнительно скрывать тени и псевдоэлементы
4. Интерактивность — область клика соответствует видимой форме в современных браузерах

FAQ

В чём разница между clip-path и overflow: hidden?

overflow: hidden обрезает по прямоугольной границе элемента (с учётом border-radius). clip-path задаёт произвольную форму — треугольник, круг, многоугольник. clip-path не влияет на layout и не создаёт scroll.

Можно ли анимировать clip-path?

Да. clip-path анимируется через transition и @keyframes. При морфинге polygon количество точек должно совпадать в начальном и конечном состоянии.

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

Современные браузеры (Chrome 55+, Firefox 54+, Safari 9.1+, Edge 79+) поддерживают clip-path. IE не поддерживает. Для Safari иногда нужен префикс -webkit-clip-path. Используйте @supports для fallback.

Как создать волнообразный край с clip-path?

Используйте polygon() с серией точек по нижнему краю. Например: polygon(0 0, 100% 0, 100% 70%, 80% 85%, 60% 70%, 40% 85%, 20% 70%, 0 85%). Меняйте координаты для разной «волны». Генератор clip-path на reChecker помогает подобрать форму визуально.

Какой инструмент использовать для создания clip-path?

Генератор clip-path на reChecker — бесплатный онлайн-инструмент для визуального создания масок. Поддерживает polygon, circle, ellipse, inset с живым предпросмотром и экспортом CSS. Подходит для дизайнеров и разработчиков.