clip-path

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

Историческая справка: Свойство clip-path заменило устаревшее свойство clip .

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

/* Image values */ 
clip-path: url(resources.svg#c1);

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

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

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

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

<svg class="defs">
  <defs>
    <clipPath id="myPath" clipPathUnits="objectBoundingBox">
      <path d="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" />
    </clipPath>
  </defs>
</svg>

<div class="grid">
  <div class="col">
    <div class="note">clip-path: none</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="none">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="none">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: url(#myPath)<br><br>
      Assuming the following clipPath definition:
      <pre>
&lt;svg&gt;
  &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
    &lt;path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" /&gt;
  &lt;/clipPath&gt;
&lt;/svg&gt;</pre>
    </div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="svg">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape1">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape1">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape2">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape3">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape3">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape4">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape4">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape5">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape5">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape6">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape6">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape7">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape7">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape8">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape8">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape9">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape9">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

mlk

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 {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

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

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em .5em 0;
  font: .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 .6em sans-serif;
}

.viewbox {
  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
}

.container.viewbox:after {
  content: 'viewbox';
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic .6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: .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); }
.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;
}

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

Синтаксис

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

Значения

url()

Представляет URL ссылку на траекторию, ограничивающую элемент.

inset(), circle(), ellipse(), polygon()

Функция <basic-shape>. Размер и положение области определяется значением <geometry-box>. Если геометрия не определена,border-box будет использоваться в качестве блока.

<geometry-box>

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

fill-box: Использует границы объекта в качестве базовой области.
stroke-box: Использует stroke bounding box в качестве базовой области.
view-box: Использует ближайший SVG viewport в качестве базового блока. Если отриут viewBox определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом viewBox и ширина и высота базового блока устанавливаются равными значениям атрибута viewBox.
margin-box: Использует margin box в качестве базового блока.
border-box: Использует border box в качестве базового блока.
padding-box: Использует padding box в качестве базового блока.
content-box: Использует content box в качестве базового блока.

none

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

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

<clip-source> | [ <basic-shape> || <geometry-box> ] | noneгде 
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
где 
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box
где 
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<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> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Примеры

/* Inline SVG  */
.target {
  clip-path: url(#c1);
}

/* External SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* Circle shape */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

Живой пример

HTML

<img id="clipped" src="https://mdn.mozillademos.org/files/12668/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>
</select>

CSS

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

JavaScript

var clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
  document.getElementById("clipped").style.clipPath = evt.target.value;
});

Результат

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

Спецификация	Статус	Комментарий
CSS Masking Module Level 1 Определение 'clip-path' в этой спецификации.	Кандидат в рекомендации	Extends its application to HTML elements.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Определение 'clip-path' в этой спецификации.	Рекомендация	Initial definition (applies to SVG elements only).

Совместимость

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Edge Mobile	Firefox для Android	Opera для Android	iOS Safari	Samsung Internet
Базовая поддержка Экспериментальная	Chrome Полная поддержка 55 Полная поддержка 55 Полная поддержка 24 С префиксом С префиксом Требует вендорный префикс: -webkit-	Edge Нет поддержки Нет	Firefox Полная поддержка 3.5	IE Нет поддержки Нет	Opera Полная поддержка 42	Safari Нет поддержки Нет	WebView Android Полная поддержка 55	Chrome Android Полная поддержка 55 Полная поддержка 55 Полная поддержка Да С префиксом С префиксом Требует вендорный префикс: -webkit-	Edge Mobile Нет поддержки Нет	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 42	Safari iOS Нет поддержки Нет	Samsung Internet Android Полная поддержка 6.0 Полная поддержка 6.0 Полная поддержка Да С префиксом С префиксом Требует вендорный префикс: -webkit-
On SVG elements	Chrome Полная поддержка 55	Edge Полная поддержка 15 Замечания Полная поддержка 15 Замечания Замечания Edge only supports clip paths defined by `url()`.	Firefox Полная поддержка 52	IE Полная поддержка Да Замечания Полная поддержка Да Замечания Замечания Internet Explorer only supports clip paths defined by `url()`.	Opera Полная поддержка 42	Safari Нет поддержки Нет	WebView Android Полная поддержка 55	Chrome Android Полная поддержка 55	Edge Mobile Полная поддержка 12 Замечания Полная поддержка 12 Замечания Замечания Edge only supports clip paths defined by `url()`.	Firefox Android Полная поддержка 52	Opera Android Полная поддержка 42	Safari iOS Нет поддержки Нет	Samsung Internet Android Полная поддержка 6.0
`<basic-shape>`	Chrome Полная поддержка 55	Edge Нет поддержки Нет	Firefox Полная поддержка 54 Полная поддержка 54 Нет поддержки 47 — ? Отключено Отключено From version 47: this feature is behind the `layout.css.clip-path-shapes.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Нет поддержки Нет	Opera Полная поддержка 42	Safari Нет поддержки Нет	WebView Android Полная поддержка 55	Chrome Android Полная поддержка 55	Edge Mobile Нет поддержки Нет	Firefox Android Полная поддержка 54 Полная поддержка 54 Нет поддержки 47 — ? Отключено Отключено From version 47: this feature is behind the `layout.css.clip-path-shapes.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Полная поддержка 42	Safari iOS Нет поддержки Нет	Samsung Internet Android Полная поддержка 6.0
`path()`	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox Полная поддержка 63 Отключено Полная поддержка 63 Отключено Отключено From version 63: this feature is behind the `layout.css.clip-path-path.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Нет поддержки Нет	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Edge Mobile Нет поддержки Нет	Firefox Android Полная поддержка 63 Отключено Полная поддержка 63 Отключено Отключено From version 63: this feature is behind the `layout.css.clip-path-path.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Нет поддержки Нет	Safari iOS Нет поддержки Нет	Samsung Internet Android Нет поддержки Нет
Animations	Chrome Полная поддержка 55	Edge Нет поддержки Нет	Firefox Полная поддержка 49	IE Нет поддержки Нет	Opera Полная поддержка 42	Safari Нет поддержки Нет	WebView Android Полная поддержка 55	Chrome Android Полная поддержка 55	Edge Mobile Нет поддержки Нет	Firefox Android Полная поддержка 49	Opera Android Полная поддержка 42	Safari iOS Нет поддержки Нет	Samsung Internet Android Полная поддержка 6.0
`fill-box` and `stroke-box`	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox Полная поддержка 51 Замечания Полная поддержка 51 Замечания Замечания This value was supported before Firefox 51, but as an alias to `border-box`.	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Нет поддержки Нет	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Edge Mobile Нет поддержки Нет	Firefox Android Полная поддержка 51 Замечания Полная поддержка 51 Замечания Замечания This value was supported before Firefox 51, but as an alias to `border-box`.	Opera Android ?	Safari iOS Нет поддержки Нет	Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка: Полная поддержка
Нет поддержки: Нет поддержки
Совместимость неизвестна: Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.: Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.: Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.: Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.: Требует вендорный префикс или другое имя для использования.

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

clip-rule, mask, filter
CSS Shapes, clipping and masking – and how to use them
Applying SVG effects to HTML content
clip-path SVG attribute