clip-path

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

* Some parts of this feature may have varying levels of support.

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

Интерактивный пример

Синтаксис

css
/* Ключевые слова */
clip-path: none;

/* Значения <clip-source> */
clip-path: url(resources.svg#c1);

/* Значения <geometry-box> */
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> */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 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: padding-box circle(50px at 0 100px);

/* Глобальные значения */
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()

Определяет многоугольник, используя стиль заполнения фигуры и набор вершин.

path()

Определяет фигуру, используя объявление SVG фигуры и правило заполнения.

<geometry-box>

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

margin-box

Использует margin box для определения блока.

border-box

Использует border box для определения блока.

padding-box

Использует padding box для определения блока.

content-box

Использует content box для определения блока.

fill-box

Использует область заливки объекта для определения блока.

stroke-box

Использует границы объекта для определения блока.

view-box

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

none

Область не создается.

Примечание: Значение, отличное от none, приводит к созданию нового контекста наложения так же, как при использовании значений CSS-свойства opacity, отличных от 1.

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

Начальное значениеnone
Применяется квсе элементы; в SVG, это применяется к контейнерам, исключая элемент <defs> и все графические элементы
Наследуетсянет
Процентыrefer to reference box when specified, otherwise border-box
Обработка значениякак указано, но с абсолютными значениями url
Animation typeда, как указано для <basic-shape>, иначе нет

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

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

<clip-source> =
<url>

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

<url> =
<url()> |
<src()>

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

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

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

Примеры

Сравнение HTML и SVG

css
html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
  flex: 1;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  display: inline-block;
  border: 1px dotted grey;
  position: relative;
}

.container::before {
  content: "margin";
  position: absolute;
  top: 2px;
  left: 2px;
  font: italic 0.6em sans-serif;
}

.view-box {
  box-shadow:
    1rem 1rem 0 #efefef inset,
    -1rem -1rem 0 #efefef inset;
}

.container.view-box::after {
  content: "view-box";
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic 0.6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: 0.5em;
}

p {
  font-family: sans-serif;
  background: #000;
  color: pink;
  margin: 2em;
  padding: 3em 1em;
  border: 1em solid pink;
  width: 6em;
}

.none {
  clip-path: none;
}
.svg {
  clip-path: url(#myPath);
}
.svg2 {
  clip-path: path(
    "M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z"
  );
}
.shape1 {
  clip-path: circle(25%);
}
.shape2 {
  clip-path: circle(25% at 25% 25%);
}
.shape3 {
  clip-path: fill-box circle(25% at 25% 25%);
}
.shape4 {
  clip-path: stroke-box circle(25% at 25% 25%);
}
.shape5 {
  clip-path: view-box circle(25% at 25% 25%);
}
.shape6 {
  clip-path: margin-box circle(25% at 25% 25%);
}
.shape7 {
  clip-path: border-box circle(25% at 25% 25%);
}
.shape8 {
  clip-path: padding-box circle(25% at 25% 25%);
}
.shape9 {
  clip-path: content-box circle(25% at 25% 25%);
}

.defs {
  width: 0;
  height: 0;
  margin: 0;
}

pre {
  margin-bottom: 0;
}

svg {
  margin: 1em;
  font-family: sans-serif;
  width: 192px;
  height: 192px;
}

svg rect {
  stroke: pink;
  stroke-width: 16px;
}

svg text {
  fill: pink;
  text-anchor: middle;
}

svg text.em {
  font-style: italic;
}

Полный пример

HTML

html
<img id="clipped" src="mdn.svg" alt="MDN logo" />
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90" />
      <rect x="0" y="110" width="90" height="90" />
      <rect x="137" y="0" width="90" height="90" />
      <rect x="0" y="0" width="90" height="90" />
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</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>

CSS

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

Результат

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

Specification
CSS Masking Module Level 1
# the-clip-path

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
clip-path
<basic-shape>
fill-box
On HTML elements
Is animatable
path()
stroke-box
On SVG elements
view-box

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Смотрите также