Создание адаптивных фигур с помощью CSS-функции xywh()

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

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

Что такое CSS-функция xywh()?

Функция xywh() создаёт прямоугольные базовые фигуры, указывая четыре значения: координаты x и y верхнего левого угла, за которыми следуют ширина и высота. Она принадлежит к семейству базовых CSS-фигур наряду с inset(), circle(), ellipse() и polygon().

.element {
  clip-path: xywh(10% 10% 80% 80%);
}

Это обрезает элемент до прямоугольника, начинающегося на 10% слева, 10% сверху, охватывающего 80% ширины и 80% высоты. Все четыре значения принимают любую единицу <length-percentage>, что делает адаптивную обрезку простой.

Поддержка браузерами: готово к продакшену в 2025 году

Функция xywh() достигла статуса Baseline 2024 и работает в:

• Chrome/Edge 119+
• Firefox 122+
• Safari 17.2+

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

Синтаксис и параметры

Функция принимает четыре обязательных значения и одно опциональное ключевое слово:

clip-path: xywh(x y width height round border-radius);

Значения позиции (x, y): Расстояние от левого и верхнего краёв референсного блока.

Значения размеров (width, height): Размер прямоугольника. Они должны быть неотрицательными.

Ключевое слово round: Опционально. При включении позволяет использовать скруглённые углы с тем же синтаксисом, что и border-radius.

/* Острые углы */
clip-path: xywh(0 0 100% 100%);

/* Равномерное скругление */
clip-path: xywh(5% 5% 90% 90% round 12px);

/* Асимметричное скругление */
clip-path: xywh(0 0 100% 100% round 20px 0 20px 0);

Адаптивная обрезка с процентами

Настоящая мощь xywh() проявляется при использовании процентных значений. В отличие от фиксированных пиксельных значений, проценты автоматически реагируют на изменения размера контейнера.

.card-image {
  clip-path: xywh(5% 5% 90% 90% round 8px);
}

Это создаёт адаптивный clip-path layout, который сохраняет пропорциональные отступы независимо от размеров карточки. Комбинируйте с единицами viewport или calc() для более сложных адаптивных паттернов:

.hero-clip {
  clip-path: xywh(
    2vw 
    2vh 
    calc(100% - 4vw) 
    calc(100% - 4vh) 
    round 1rem
  );
}

xywh() против inset(): выбор правильной функции

Обе функции создают прямоугольники, но подходят к проблеме по-разному.

Используйте inset(), когда вы определяете отступы от каждого края:

/* 20px внутрь от всех краёв */
clip-path: inset(20px);

Используйте xywh(), когда вам нужен явный контроль позиции и размера:

/* Прямоугольник в определённых координатах с определёнными размерами */
clip-path: xywh(50px 50px 200px 150px);

Функция xywh() превосходна при анимации фигур или когда вам нужен прямоугольник, который не коррелирует напрямую с краями элемента. Перемещение фигуры с inset() требует пересчёта всех четырёх значений краёв. С xywh() вы корректируете только координаты x и y.

Практические применения

Маски изображений с постоянными отступами:

.thumbnail {
  clip-path: xywh(4% 4% 92% 92% round 6px);
}

Обработка углов карточек:

.feature-card {
  clip-path: xywh(0 0 100% 100% round 16px 16px 0 0);
}

Анимированные эффекты раскрытия:

.reveal {
  clip-path: xywh(0 0 0% 100%);
  transition: clip-path 0.3s ease-out;
}

.reveal:hover {
  clip-path: xywh(0 0 100% 100%);
}

Взгляд в будущее: функция shape()

Более новая функция shape() предлагает ещё большую гибкость для сложных путей, но xywh() остаётся правильным инструментом для прямоугольных фигур. Она проще, более читаема и полностью поддерживается уже сегодня.

Заключение

CSS-функция xywh() предоставляет чистый, интуитивный синтаксис для прямоугольной обрезки, который естественно масштабируется с адаптивными макетами. Её процентные значения устраняют ручные вычисления при изменении размера контейнеров, а знакомый синтаксис border-radius для скруглённых углов сохраняет ваш код последовательным.

Для любого clip-path layout, требующего прямоугольников — будь то статические маски или анимированные раскрытия — xywh() теперь является готовым к продакшену выбором во всех современных браузерах.

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

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..