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

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

Попробуйте

clip-path: circle(40%);

clip-path: ellipse(130px 140px at 10% 20%);

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

clip-path: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z");

clip-path: rect(5px 145px 160px 5px round 20%);

clip-path: xywh(0 5px 100% 75% round 15% 0);

<section class="default-example" id="default-example">
  <div class="example-container">
    <img
      class="transition-all"
      id="example-element"
      src="/shared-assets/images/examples/balloon-small.jpg"
      width="150" />
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o'clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up "ballooning"
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of "automobiling" at a breakneck speed, the
    members of the "Aéro Club" now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </div>
</section>

section {
  align-items: flex-start;
}

.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  width: 150px;
  margin: 20px;
}

Синтаксис

/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url("resources.svg#c1");

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);
clip-path: rect(5px 5px 160px 145px round 20%);
clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
clip-path: xywh(0 5px 100% 75% round 15% 0);

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;

Свойство clip-path задаётся одним или сочетанием перечисленных ниже значений.

Значения

<clip-source>

<url>, указывающий на элемент SVG <clipPath>.

<basic-shape>

Фигура, размер и положение которой определяются значением <geometry-box>. Если геометрическая рамка не указана, в качестве опорной рамки используется border-box. Одно из следующих значений:

inset()

Задаёт прямоугольник с отступами.

circle()

Задаёт круг с помощью радиуса и положения.

ellipse()

Задаёт эллипс с помощью двух радиусов и положения.

polygon()

Задаёт многоугольник с помощью правила заливки SVG и набора вершин.

path()

Задаёт фигуру с помощью необязательного правила заливки SVG и описания контура SVG.

rect()

Задаёт прямоугольник с помощью указанных расстояний от краёв опорной рамки.

shape()

Задаёт фигуру с помощью необязательного правила заливки SVG и команд для построения линий, кривых и дуг.

xywh()

Задаёт прямоугольник с помощью указанных расстояний от верхнего и левого краёв опорной рамки, а также заданных ширины и высоты прямоугольника.

<geometry-box>

Если это значение задано вместе с <basic-shape>, оно определяет опорную рамку для базовой фигуры. Если оно задано самостоятельно, края указанной рамки, включая форму углов (например, border-radius), становятся контуром отсечения. Геометрическая рамка может принимать одно из следующих значений:

margin-box

В качестве опорной рамки используется внешнее поле.

border-box

В качестве опорной рамки используется граница.

padding-box

В качестве опорной рамки используется внутренний отступ.

content-box

В качестве опорной рамки используется область содержимого.

fill-box

В качестве опорной рамки используется ограничивающая рамка объекта.

stroke-box

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

view-box

В качестве опорной рамки используется ближайшая область просмотра SVG. Если для элемента, создающего область просмотра SVG, задан атрибут viewBox, опорная рамка располагается в начале системы координат, заданной атрибутом viewBox, а её размеры по ширине и высоте устанавливаются в соответствии со значениями ширины и высоты атрибута viewBox.

none

Контур отсечения не создаётся.

Формальное определение

Формальный синтаксис

clip-path = 
  <clip-source> |
  [ <basic-shape> || <geometry-box> ] |
  none

<clip-source> = 
  <url>

<basic-shape> = 
  <inset()> |
  <xywh()> |
  <rect()> |
  <circle()> |
  <ellipse()> |
  <polygon()> |
  <path()> |
  shape()

<geometry-box> = 
  <shape-box> |
  fill-box |
  stroke-box |
  view-box

<inset()> = 
  inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )

<xywh()> = 
  xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )

<rect()> = 
  rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? )

<circle()> = 
  circle( <radial-size>? [ at <position> ]? )

<ellipse()> = 
  ellipse( <radial-size>? [ at <position> ]? )

<polygon()> = 
  polygon( <'fill-rule'>? , [ <length-percentage> <length-percentage> ]# )

<path()> = 
  path( <'fill-rule'>? , <string> )

<shape-box> = 
  <visual-box> |
  margin-box

<length-percentage> = 
  <length> |
  <percentage>

<radial-size> = 
  <radial-extent> |
  <length [0,∞]> |
  <length-percentage [0,∞]>{2}

<position> = 
  [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

<visual-box> = 
  content-box |
  padding-box |
  border-box

<radial-extent> = 
  closest-corner |
  closest-side |
  farthest-corner |
  farthest-side

Примеры

Фигуры и геометрические рамки

В этом примере создаются два треугольника: для элементов <div> в качестве контура отсечения задаётся polygon(). У каждого из них сплошной цветной фон и толстая border. Для второго элемента <div> опорной рамкой задано значение content-box:

HTML

<div></div>
<div></div>

CSS

body {
  display: flex;
  gap: 20px;
  flex-flow: row wrap;
}

div {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  background-color: rebeccapurple;
  border: 20px solid magenta;

  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

div:last-of-type {
  clip-path: content-box polygon(50% 0, 100% 100%, 0 100%);
}

Результат

Для первого треугольника мы не указали опорную рамку, поэтому по умолчанию используется border-box, а позиции 0% и 100% находятся на внешнем крае границы. Во втором примере мы задали <geometry-box> значение content-box. Это означает, что опорной рамкой для базовой фигуры служит внешний край области содержимого, находящийся внутри рамки внутреннего отступа. Поскольку в нашем примере нет padding, это внутренний край границы.

Функции shape() и path()

Развивая предыдущий пример, мы создаём тот же треугольник с разными значениями <basic-shape> и показываем, что функции shape() и path() также можно использовать для создания контуров отсечения, причём shape() — более гибкое решение.

Для задания контура отсечения первого элемента мы используем path(), а для второго — shape(); в обоих случаях используется значение border-box по умолчанию в качестве опорной рамки:

div {
  clip-path: path("M100 0 L200 200 L0 200 Z");
}

div:last-of-type {
  clip-path: shape(from 50% 0, line to 100% 100%, line to 0 100%, close);
}

В результате контур, заданный функцией shape(), увеличивается вместе с элементом, а вариант path() — нет:

Поскольку функция shape() позволяет использовать значения <percentage> (а также пользовательские свойства), она более универсальна.

Продемонстрируем это, увеличив размер исходного элемента:

div {
  width: 250px;
  height: 250px;
}

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

SVG в качестве источника отсечения

В этом примере мы задаём элементы SVG <clipPath>, которые будут использоваться в качестве источника clip-path.

HTML

Мы добавляем два элемента <div> и элемент <svg>, содержащий два элемента <clipPath>. Один <clipPath> содержит четыре элемента <rect>, которые вместе образуют оконные стёкла, оставляя посередине пустой крест, а другой содержит два пересекающихся элемента <rect>.

<svg height="0" width="0">
  <defs>
    <clipPath id="window">
      <rect y="0" x="0" width="80" height="80" />
      <rect y="0" x="120" width="80" height="80" />
      <rect y="120" x="0" width="80" height="80" />
      <rect y="120" x="120" width="80" height="80" />
    </clipPath>
    <clipPath id="cross">
      <rect y="0" x="80" width="40" height="200" />
      <rect y="80" x="0" width="200" height="40" />
    </clipPath>
  </defs>
</svg>

<div class="window">Window</div>
<div class="cross">Cross</div>

CSS

Мы используем flexbox, чтобы расположить элементы рядом друг с другом с промежутком, если хватает места. Для обоих элементов <div> мы задаём фоновое изображение conic-gradient(), создающее интересный визуальный эффект для отсечения, а также border.

body {
  display: flex;
  gap: 20px;
  flex-flow: row wrap;
  font: 2em sans-serif;
}

div {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(
    at center,
    rebeccapurple,
    green,
    lightblue,
    rebeccapurple
  );

  border: 5px solid;
  box-sizing: border-box;
}

Затем мы задаём id элемента <clipPath> в качестве <clip-source>. В примере cross мы вертикально центрируем текст с помощью align-content, иначе текст будет обрезан, как это происходит в примере window.

.window {
  clip-path: url("#window");
}

.cross {
  clip-path: url("#cross");
  align-content: center;
}

Результат

Элементы, включая их границы и текст, обрезаются: на странице отображаются только их части, перекрывающие элементы <clipPath>.

Различные типы значений

В этом примере показано, как различные значения свойства clip-path обрезают HTML-элемент <img>.

HTML

HTML включает элемент <img>, который будет обрезан, <clipPath> в форме звезды и элемент <select> для выбора значения свойства clip-path.

<img
  id="clipped"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<svg height="0" width="0">
  <defs>
    <clipPath id="star">
      <path d="M100,0 42,180 196,70 4,70 158,180z" />
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#star)" selected>star</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="rect(20px 150px 200px 20px round 10%)">rect</option>
  <option value="xywh(0 20% 90% 67% round 0 0 5% 5px)">xywh</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
    path
  </option>
</select>

<pre id="log"></pre>

CSS

В исходном виде звезда используется в качестве источника clip-path.

#clipped {
  margin-bottom: 20px;
  clip-path: url("#star");
}

JavaScript

При выборе нового пункта в меню <select> обработчик события обновляет значение clip-path, заданное для элемента <img>.

const clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", (evt) => {
  const path = evt.target.value;
  document.getElementById("clipped").style.clipPath = path;
  log(`clip-path: ${path};`);
});

function log(text) {
  const logElement = document.querySelector("#log");
  logElement.innerText = `${text}`;
  logElement.scrollTop = logElement.scrollHeight;
}

Результат

Выбирайте разные варианты, чтобы изменить значение clip-path.

Спецификации

Совместимость с браузерами

См. также

• clip-rule
• mask
• filter
• background-clip
• Введение в отсечение в CSS
• Модуль маскирования CSS
• Атрибут SVG clip-path
• Применение эффектов SVG к содержимому HTML