Используйте shape() для адаптивного обрезки

Noam Rosenthal

Опубликовано: 8 апреля 2025 г.

Свойство clip-path позволяет изменять форму элемента, обрезая его по окружности, многоугольнику или даже по SVG-пути. Однако до Chrome 135 и Safari 18.4 приходилось выбирать между адаптивными многоугольниками и более сложными фигурами, которые не являются адаптивными, используя SVG-пути. С новой функцией shape() свойство clip-path позволяет обрезать элемент по не многоугольной, но также адаптивной фигуре.

Создайте фигуру флага.

В качестве примера сравним создание фигуры флага с помощью clip-path: path() и clip-path: shape() .

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

Создайте флаг с помощью clip-path: path()

Фигуру, подобную этой флагу, можно представить с помощью SVG-пути:

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

Проще говоря, SVG-путь — это последовательность команд для создания пути:

1. Переместитесь в точку 0, 20.
2. Постройте кривую до 100, 20, используя контрольные точки (25,0 и 75, 40).
3. Вертикальная линия до 80.
4. Постройте кривую до 0, 80, используя контрольные точки (75, 100 и 25, 50).
5. Замкните путь (линия до 0,20).

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

Например, если вам нужно, чтобы весь прямоугольник масштабировался, но при этом высота и ширина кривых оставались равными 20 пикселям, SVG с этим не справится.

Создайте флаг с помощью shape()

Сравните тот же результат, используя shape() . Функция shape принимает ряд команд, аналогичных командам для работы с путями SVG. Однако эти команды принимают длину CSS и проценты в любых единицах измерения CSS.

Следующий CSS-код преобразует флаг в фигуру ( shape() с указанием процентных единиц:

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

Сделайте его адаптивным.

Благодаря полному диапазону доступных длин CSS-стилей, вы можете выбрать, какие из них использовать для каждой координаты.

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

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

Добавьте пользовательские свойства и анимации.

Теперь, когда форма определяется в CSS, вы также можете использовать пользовательские свойства, чтобы упростить управление высотой:

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Вы даже можете анимировать свойство CSS, используя дескриптор @property , и ограничить его значение, чтобы оно не выходило за пределы допустимого диапазона:

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Попробуйте демоверсию

В Chrome 135 или Safari 18.4 вы можете увидеть анимированную фигуру флага, созданную с помощью clip-path: shape() в этом примере на CodePen .

Краткое содержание

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

Полный синтаксис см. в спецификации .

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