Творческие возможности CSS-функции shape

Вам нужна декоративная стрелка, которая обрезает главное изображение. Вы обращаетесь к clip-path: path(), прописываете SVG-координаты, и всё работает — до тех пор, пока контейнер не изменит размер. Стрелка остаётся зафиксированной в исходных пикселях, в то время как всё остальное масштабируется. Это основное ограничение, которое решает CSS-функция shape().

Что на самом деле делает CSS-функция shape()

Функция shape() — это нативный CSS-способ определения сложных фигур с использованием привычных CSS-единиц, таких как проценты, calc() и единицы container query. В отличие от path(), которая заимствует синтаксис SVG и интерпретирует все значения как пиксели, shape() позволяет создавать адаптивные CSS-фигуры, которые подстраиваются под содержащий элемент.

Вот ключевое различие. С path():

clip-path: path("M0 0 L 100 0 L 150 50 L 100 100 L 0 100 z");

Эти числа — фиксированные пиксели. Измените размер элемента, и фигура останется того же размера.

С shape():

clip-path: shape(from 0% 0%, 
  line to calc(100% - 50px) 0%, 
  line to 100% 50%, 
  line to calc(100% - 50px) 100%, 
  line to 0% 100%, 
  close);

Теперь фигура масштабируется вместе с элементом. Проценты вычисляются относительно размеров элемента. Вы можете смешивать фиксированные значения с относительными, создавая фигуры, которые сохраняют пропорции или определённые углы при изменении размеров контейнера.

Где работает shape(): clip-path и offset-path

CSS-функция shape() в настоящее время применяется к двум свойствам с различными целями.

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

CSS offset-path shape() определяет траекторию движения для анимаций. В сочетании с offset-distance вы можете перемещать элементы вдоль пользовательских кривых и линий. Фигура описывает траекторию, а не видимость.

Это принципиально отличается от shape-outside, которое влияет на обтекание текстом вокруг плавающих элементов. Это свойство относится к CSS Shapes Level 1 и в настоящее время не поддерживает функцию shape() — только базовые фигуры, такие как circle(), ellipse() и polygon().

Поддержка браузерами: реальность конца 2025 года

Функция shape() появилась в Safari 18.4 и реализована в браузерах на базе Chromium. Firefox пока её не поддерживает. Это означает, что вы не можете рассматривать её как базовый CSS.

Определение поддержки функции выполняется просто:

@supports (clip-path: shape(from 0% 0%, line to 100% 0%)) {
  /* shape() поддерживается */
}

Для использования в продакшене необходимо прогрессивное улучшение. Начните с fallback на polygon(), который приблизительно воспроизводит вашу фигуру без кривых, затем добавьте версию с shape() для поддерживающих браузеров:

.element {
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
  clip-path: shape(from 0% 0%, 
    line to 80% 0%, 
    line to 100% 50%, 
    line to 80% 100%, 
    line to 0% 100%, 
    close);
}

Второе объявление перезаписывает первое только в браузерах, которые его понимают.

Креативные сценарии использования, достойные изучения

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

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

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

Настоящая мощь проявляется, когда вы комбинируете shape() с CSS-переменными и единицами container query. Одно определение фигуры может адаптироваться к нескольким контекстам без пересчёта через JavaScript.

Заключение

CSS-функция shape() решает конкретную проблему: делает сложные контуры обрезки и траектории движения адаптивными, не выходя за рамки CSS. Она использует нативный синтаксис, поддерживает calc() и работает с координатами на основе процентов.

Она не заменяет path() для фигур с фиксированными размерами, где важна пиксельная точность. Она не работает с shape-outside для обтекания текстом. И она требует fallback до появления поддержки в Firefox.

Для креативных визуальных эффектов, которые должны масштабироваться, shape() — это недостающий инструмент. Используйте её с чёткими стратегиями fallback, и ваша декоративная обрезка наконец будет вести себя как остальная часть вашего адаптивного макета.

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

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..