W3docs
ru
Войти

Свойство CSS clip-path

Свойство CSS clip-path создаёт область отсечения, показывая указанную часть элемента. Значения и примеры.

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

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

Это свойство принимает четыре вида значений:

  • <clip-source> — url(), указывающий на SVG-элемент <clipPath>, для полностью произвольных путей.
  • <basic-shape> — функция CSS-формы: circle(), ellipse(), inset() или polygon().
  • <geometry-box> — опорный блок, относительно которого измеряется форма (border-box, padding-box, content-box или margin-box).
  • none — без отсечения; отображается весь элемент (значение по умолчанию).

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

Когда использовать clip-path

  • Отображать аватары или миниатюры в виде кругов или шестиугольников, сохраняя квадратное исходное изображение.
  • Создавать угловые или диагональные разделители секций без дополнительных фоновых изображений.
  • Показывать или скрывать контент с анимированной формой (поскольку значения <basic-shape> поддерживают анимацию).
  • Создавать декоративные вырезы, значки и стрелки из одного элемента.

Если текст должен обтекать форму, а не обрезаться по ней, используйте вместо этого shape-outside.

Начальное значениеnone
Применяется кВсем элементам.
НаследуетсяНет
АнимируетсяДа, если задано для <basic-shape>.
ВерсияCSS Masking Module Level 1
DOM Синтаксисobject.style.clipPath = "none";

Синтаксис

clip-path: <clip-source> | <basic-shape> | <geometry-box> | none | initial | inherit | unset;

Функции basic-shape

Эти четыре функции охватывают почти все потребности в отсечении. Координаты могут использовать любые CSS-единицы длины или проценты; проценты вычисляются относительно опорного блока.

  • circle(radius at cx cy) — круг. Пример: circle(50% at 50% 50%) вписывает наибольший круг с центром в середине элемента.
  • ellipse(rx ry at cx cy) — эллипс с отдельными горизонтальным и вертикальным радиусами.
  • inset(top right bottom left round <radius>) — прямоугольник, смещённый от каждого края, с необязательным ключевым словом round для скруглённых углов.
  • polygon(x1 y1, x2 y2, …) — произвольный многоугольник, заданный списком вершин по часовой стрелке. polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) создаёт ромб.

Для форм, которые нельзя выразить этими функциями, используйте SVG <clipPath>: clip-path: url(#myClip).

Пример свойства clip-path:

Пример CSS clip-path с значением basic-shape

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container div {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .example {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
    </style>
  </head>
  <body>
    <h1>Clip-path property example</h1>
    <div class="container">
      <div class="example">polygon</div>
    </div>
  </body>
</html>
Попробуйте сами »

Результат

Свойство CSS clip-path

Квадратное изображение обрезается до формы ромба — его углы скрыты, а блок макета по-прежнему остаётся 200×200.

Пример свойства clip-path со всеми значениями:

Пример CSS clip-path с глобальными значениями и basic-shape

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container > div {
        background-image: url(/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg);
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box1 {
        clip-path: none;
      }
      .box2 {
        clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
        /* values are from-top, from-right, from-bottom, from-left, and optional round keyword for border-radius */
      }
      .box3 {
        clip-path: circle(50% at 50% 50%);
      }
      .box4 {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
      .box5 {
        clip-path: ellipse(90px 50px at 100px 100px);
      }
      .box6 {
        clip-path: inherit;
      }
      .box7 {
        clip-path: initial;
      }
      .box8 {
        clip-path: unset;
      }
    </style>
  </head>
  <body>
    <h2>Clip-path property example</h2>
    <div class="container">
      <div class="box1">none</div>
      <div class="box2">inset</div>
      <div class="box3">circle</div>
      <div class="box4">polygon</div>
      <div class="box5">ellipse</div>
      <div class="box6">inherit</div>
      <div class="box7">initial</div>
      <div class="box8">unset</div>
    </div>
  </body>
</html>
Попробуйте сами »

Анимация clip-path

Когда начальное и конечное состояния используют одну и ту же функцию <basic-shape> с одинаковым количеством точек, браузеры могут плавно интерполировать между ними. Это позволяет создавать эффекты появления и морфинга форм с помощью transition или animation:

.reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s ease;
}
.reveal:hover {
  clip-path: circle(75% at 50% 50%);
}

polygon() анимируется только до другого polygon() с тем же количеством вершин, поэтому количество точек на обоих концах должно совпадать.

Поддержка браузерами и советы

  • clip-path со значениями <basic-shape> поддерживается во всех современных браузерах. Старые версии требовали префикса -webkit-; сегодня для вечнозелёных браузеров достаточно объявления без префикса.
  • Скрытая область удаляется только визуально — она по-прежнему влияет на макет и недоступна для кликов, поэтому остальная часть страницы не затрагивается.
  • Отсечение может скрывать контуры, тени блоков и индикаторы фокуса, выходящие за пределы формы; убедитесь, что фокус с клавиатуры остаётся видимым.

Значения

ЗначениеОписание
<clip-source><url>, ссылающийся на SVG-элемент <clipPath>.
<basic-shape>Функция базовой формы, например circle(), ellipse(), inset() или polygon(). Может сочетаться с <geometry-box> через косую черту (/).
<geometry-box>Определяет опорный блок для базовой формы (например, border-box, padding-box, content-box, margin-box).
noneОбласть отсечения не создаётся.

Примечание: initial, inherit и unset — глобальные значения CSS и могут использоваться с любым свойством.

Практика

Практика
Что делает свойство CSS clip-path?
Что делает свойство CSS clip-path?
Was this page helpful?