clip-path CSS и SVG: обрезка элементов

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

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

Теперь мы можем использовать базовые функции для построения фигур (polygon, circle, ellipse, inset) или ссылаться на сложные пути, описанные в SVG. Это дает дизайнерам и разработчикам свободу, недоступную ранее, при этом сохраняя высокую производительность, так как обрезка происходит на уровне браузера без изменения DOM-структуры.

Функция circle() принимает два основных параметра: радиус и позицию центра круга. Радиус может быть задан в любых единицах измерения CSS (px, em, rem, %). Для позиции центра используется ключевое слово at, после которого указываются координаты по осям X и Y. Если координаты не указаны, центр по умолчанию располагается в центре элемента (50% 50%).

Базовый синтаксис circle()

clip-path: circle(радиус at позиция);
clip-path: circle(50%); /* круг радиусом 50% от размера элемента, центр по умолчанию */
clip-path: circle(100px at center); /* круг радиусом 100px в центре */
clip-path: circle(30% at 20% 30%); /* круг радиусом 30% с центром в координатах 20% по X и 30% по Y */

Вот как это выглядит на практике.

.photo {
    width: 250px;
    height: 250px;
    background-image: url('/employee.webp');
    background-size: cover;
    /* Превращаем квадрат в круг */
    clip-path: circle(45% at 50% 50%);
    transition: clip-path 0.5s ease-in-out;
}

.photo:hover {
    /* При наведении меняем радиус */
    clip-path: circle(100% at 50% 50%);
}

Функция ellipse() работает по схожему принципу, но позволяет задать два радиуса: по оси X и по оси Y. Это дает возможность создавать вытянутые овалы.

Базовый синтаксис ellipse()

clip-path: ellipse(радиусX радиусY at позицияX позицияY);
clip-path: ellipse(50% 25%);
/* эллипс с горизонтальным радиусом 50% и вертикальным радиусом 25% от размера элемента, центр по умолчанию */
clip-path: ellipse(100px 50px at center);
/* эллипс с горизонтальным радиусом 100px и вертикальным 50px в центре */
clip-path: ellipse(30% 20% at 20% 30%);
/* эллипс с радиусами 30% по X и 20% по Y, центр в координатах 20% по X и 30% по Y */
clip-path: ellipse(closest-side farthest-side at 30% 40%);
/* эллипс, где горизонтальный радиус до ближайшей стороны, вертикальный до дальней, центр смещен */

.car{
  clip-path: ellipse(40% 25% at 50% 45%);
  transition: clip-path .5s ease-in-out;
}
.car:hover{
  clip-path: ellipse(45% 150% at center);
}

Принцип работы прост: вы задаете набор координат (пар X, Y), которые соединяются прямыми линиями, формируя замкнутый контур обрезки.

Базовый синтаксис для polygon()

clip-path: polygon(координаты вершин);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Ромб (вершины: верх, право, низ, лево) */
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
/* Треугольник (вершины: лево-верх, право-верх, центр-низ) */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
/* Шестиугольник */
clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
/* Прямоугольник со скруглением углов (вершины по контуру) */
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
/* Восьмиугольник */

Формат координат

1. Каждая вершина задается парой X Y (в процентах или пикселях)
2. Вершины перечисляются через запятую
3. Порядок вершин определяет форму многоугольника

Координаты могут быть заданы как в абсолютных единицах (px), так и в относительных (процентах).

Например, значение 0% 0% соответствует левому верхнему углу элемента, а 100% 100% — правому нижнему.

.emerald {/* Обрезаем изображение в форме ромба */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transition: clip-path 0.25s linear;
}

.emerald:hover {
    /* Интерактивный эффект: превращаем ромб обратно в прямоугольник при наведении */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

Этот пример наглядно демонстрирует, как смена нескольких координат полностью меняет геометрию элемента, открывая или скрывая его части. Используя polygon(), можно создавать сложные волнообразные края или даже эффект «рваной» бумаги, добавляя множество точек с небольшими случайными отклонениями, хотя для действительно сложных форм лучше подходит SVG.

В отличие от polygon(), где нужно перечислять все четыре угла, inset() использует логику, похожую на свойство margin или padding: вы задаете отступы от краев элемента (верх, право, низ, лево), которые определяют видимую прямоугольную область.

Базовый синтаксис для inset()

clip-path: inset(отступы);
clip-path: inset(отступы round радиус);
clip-path: inset(20%);
/* Прямоугольник с отступом 20% от каждой стороны элемента */
clip-path: inset(10px 20px 30px 40px);
/* Прямоугольник с отступами: сверху 10px, справа 20px, снизу 30px, слева 40px */
clip-path: inset(15% 10%);
/* 15% сверху/снизу, 10% слева/справа */
clip-path: inset(20px round 15px);
/* Прямоугольник с отступом 20px со всех сторон и скруглением углов 15px */
clip-path: inset(10% 20% 30% round 5px 10px 15px 20px);
/* Разные отступы и скругление каждого угла */
clip-path: inset(25px round 50%);
/* Прямоугольник с отступом 25px и полным скруглением (овальная форма) */

Синтаксис может включать ключевое слово round, после которого указывается радиус скругления углов (работает аналогично border-radius). Это позволяет создавать аккуратные карточки, выделяя только их центральную часть и отсекая лишнее по краям.

.lion {    
  clip-path: inset(15% 5% 15% 5% round 12px);
  transition: clip-path 0.5s;
}
.lion:hover {
  clip-path: inset(8% 2% 8% 2% round 6px);
}

В этом коде inset(15% 5% 15% 5% round 12px) означает: оставить видимой область, которая начинается на расстоянии 15% от верхнего края, 5% от правого, 15% от нижнего и 5% от левого. Углы у этой видимой области будут скруглены на 12 пикселей. Это очень точный и удобный инструмент для кадрирования.

Синтаксис функции заимствует команды из SVG-путей. Внутри кавычек вы пишете тот самый загадочный набор букв и цифр, который обычно встречается в атрибуте d у элемента <path>. Буквы M, L, C, Q, Z — это команды, которые говорят браузеру, куда двигать «невидимое перо»: переместиться (M), провести линию (L), нарисовать кривую Безье (C, Q) или замкнуть контур (Z).

.drop {
    background: radial-gradient(circle at 50% 75%, white, lightblue);
    width: 210px;
    height: 280px;        
    /* Используем path(), созданный в Illustrator для создания формы капли */
    clip-path: path('M103,280c56,0,102-46,102-102,0-29-14-57-44-80S111,37,103,1c-7,36-29,71-58,95C15,119,1,147,1,177c0,56,46,102,102,102Z');
}
.drop:hover {
    /* Немного деформируем путь при наведении для эффекта */
    clip-path: path('M103,250c56,0,102-16,102-72,0-29-14-37-44-60-29-23-51-78-58-115-7,36-29,91-58,115C15,139,1,147,1,177c0,56,46,72,102,72Z');
}

Главное преимущество path() становится очевидным именно в таких случаях. Вам не нужно создавать отдельный SVG-файл или прятать элемент в HTML. Вся геометрия хранится непосредственно в стилях, что упрощает поддержку кода и позволяет легко анимировать форму, изменяя координаты контрольных точек. Единственный недостаток — читаемость: визуально оценить, какая получится форма, глядя на набор координат, практически невозможно. Поэтому создавать такие пути рекомендуется в векторных редакторах с последующим экспортом.

Фундаментальное ограничение функции path()

Все координаты внутри неё задаются в пикселях и не масштабируются автоматически под размер элемента. Если вы создали путь, описывающий форму размером 100×100 пикселей, и применили его к элементу шириной 500 пикселей, обрезка не растянется — видимой останется только область 100×100 пикселей в тех координатах, где определён путь. Именно поэтому path() в CSS называют «неотзывчивой» .

Для создания адаптивных обрезок, которые масштабируются вместе с элементом, по-прежнему используется SVG-подход с атрибутом clipPathUnits="objectBoundingBox" и координатами в диапазоне от 0 до 1 . Это не временная недоработка CSS, а принципиальное различие в подходах: path() остаётся инструментом для фиксированных размеров, тогда как относительные координаты — прерогатива SVG.

Этот метод считается самым мощным, но и самым требовательным к аккуратности. SVG-путь должен быть правильно определен внутри тега <svg> с использованием элемента <clipPath>, которому присваивается уникальный идентификатор (id). После этого в CSS мы используем конструкцию clip-path: url(#идентификатор);.

<!-- Определяем SVG с clipPath. Его можно разместить где угодно, даже скрыть -->
  <svg height="0" width="0" style="position: absolute;">
    <defs>
      <clipPath id="myCustomWavePath" clipPathUnits="objectBoundingBox">
        <!-- Координаты в пределах от 0 до 1, так как используем objectBoundingBox -->
        <path d="M0,0.107 C0.038,0.05,0.083,0.021,0.083,0.021 c0.057,-0.028,0.099,0.005,0.144,0.02 c0.118,0.038,0.119,-0.06,0.246,-0.038 c0.121,0.021,0.162,0.133,0.245,0.074 c0.039,-0.027,0.041,-0.039,0.086,-0.058 c0.074,-0.032,0.157,-0.014,0.196,0.027 v0.888 c-0.044,0.05,-0.14,0.095,-0.212,0.043 c-0.011,-0.008,-0.019,-0.011,-0.036,-0.019 c-0.057,-0.026,-0.092,0.013,-0.144,0.022 c-0.062,0.011,-0.057,-0.036,-0.132,-0.039 c-0.082,-0.003,-0.09,0.053,-0.179,0.056 c-0.064,0.002,-0.065,-0.027,-0.135,-0.028 c-0.102,-0.001,-0.123,0.049,-0.161,0.024 V0.107" />
      </clipPath>
    </defs>
  </svg>

  <div class="waveContainer">
    <img src="/images/hero-banner-2.jpg" alt="красивый пейзаж" class="waveImage">
  </div>

.waveContainer {
  width: min(1024px, 100%);
  /* Центрируем блок с картинкой */
  margin-inline: auto;
}
.waveImage {
  width: 100%;
  height: auto;  
  /* Применяем clip-path, ссылаясь на элемент SVG по ID */
  clip-path: url(#myCustomWavePath);
}

Обратите внимание на атрибут clipPathUnits="objectBoundingBox". Он критически важен, т.к. заставляет координаты внутри <path> интерпретироваться относительно размеров элемента, к которому применяется clip-path. Значения при этом должны быть в диапазоне от 0 до 1 (0 = 0%, 1 = 100%). Это делает обрезку полностью адаптивной.

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

То есть, вы можете плавно менять круг на другой круг, многоугольник на другой многоугольник с одинаковым количеством вершин.

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

.navigationButton {
    display: inline-block;
    padding: 14px 38px;
    background-color: #4a6fa5;
    color: white;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: clip-path 0.35s cubic-bezier(0.42, 0, 0.58, 1);
    /* Начальное состояние - обычный прямоугольник со скругленными углами */
    clip-path: inset(0% 0% 0% 0% round 8px);
}

.navigationButton:hover {
    /* Конечное состояние - трапеция (верх уже низа) */
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
}

Как видите, мы анимируем переход от inset к polygon. Хотя это разные функции, некоторые браузеры достаточно умны, чтобы интерпретировать inset как частный случай многоугольника с четырьмя вершинами. Для достижения наилучшего результата всегда проверяйте анимации в разных браузерах и старайтесь анимировать либо однотипные функции, либо использовать для сложных переходов JavaScript-библиотеки.

Рассмотрим несколько неочевидных, но полезных сценариев.

Первый сценарий

Создание «ломаных» секций на лендинге. Вместо скучных горизонтальных полос, вы можете сделать переход между блоками в виде наклонной линии или зигзага. Это достигается применением polygon() к самому блоку, а не к картинке внутри него.

Второй сценарий

Работа с текстом и подложками. Вы можете создать эффект «вырванного» листа бумаги для цитаты или использовать обрезку для создания стильных угловых элементов (например, уголков «как в Polaroid»).

.blockquoteStylish {
    position: relative;
    background-color: #f9f3e7;
    padding: 32px 28px;
    font-size: 1.3rem;
    max-width: 550px;
    /* Создаем эффект рваного края снизу */
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 95% 88%, 90% 85%, 85% 90%, 80% 85%, 75% 88%, 70% 85%, 65% 90%, 60% 85%, 55% 88%, 50% 85%, 45% 88%, 40% 85%, 35% 90%, 30% 85%, 25% 88%, 20% 85%, 15% 90%, 10% 85%, 5% 88%, 0% 85%);
}

.blockquoteStylish::before {
    content: "“";
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 5rem;
    color: rgba(0,0,0,0.1);
    font-family: serif;
}

Этот пример наглядно показывает, как множество точек в polygon() создают сложную, «живую» геометрию, которая сразу привлекает внимание и задает настроение всему макету.

При использовании clip-path необходимо учитывать поддержку различными браузерами, особенно если ваша целевая аудитория активно использует устаревшие версии. Современные браузеры (Chrome, Firefox, Safari, Edge) отлично поддерживают все базовые функции и SVG-ссылки уже много лет. Однако Internet Explorer (даже версии 11) полностью игнорирует это свойство.

Для обеспечения прогрессивного улучшения рекомендуется использовать следующий подход:

1. Задайте базовый стиль элемента, который будет работать везде (например, обычный прямоугольник).
2. Поверх добавьте правило с clip-path для современных браузеров. Также можно использовать директиву @supports для проверки поддержки.

.productCard {
    border-radius: 16px; /* Базовое скругление для старых браузеров */
    overflow: hidden; /* Помогает скрыть лишнее, даже если clip-path не сработал */
}

/* Проверяем, поддерживает ли браузер clip-path */
@supports (clip-path: polygon(0 0)) {
    .productCard {
        clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
        border-radius: 0; /* Убираем скругление, так как теперь работает обрезка */
    }
}

Еще один важный практический момент — влияние clip-path на обработку событий мыши. Область, которая стала невидимой из-за обрезки, перестает реагировать на события hover и click. Это логично, ведь для браузера её больше не существует. Учитывайте это при создании сложных интерактивных элементов — убедитесь, что кнопки и ссылки находятся строго внутри видимой области.

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

А если вам нужен не процесс обучения, а готовый результат — стильный и технически совершенный сайт для бизнеса, — просто закажите его в нашей веб-студии. Мы воплотим любые идеи в чистый код, который будет выделять вас среди конкурентов.