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 ⁨январь 2020 г.⁩.

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

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

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

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>  <div>    <img                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;}

Синтаксис

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

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

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

Примеры

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

<svg>  <defs>    <clipPath 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>  <div>    <div>clip-path: none</div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>      clip-path: url(#myPath)<br /><br />      Для этого примера определим такой вспомогательный элемент:      <pre>&lt;svg&gt;  &lt;clipPath 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>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>      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')    </div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>clip-path: circle(25%)</div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>clip-path: circle(25% at 25% 25%)</div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>clip-path: fill-box circle(25% at 25% 25%)</div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>clip-path: stroke-box circle(25% at 25% 25%)</div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>clip-path: view-box circle(25% at 25% 25%)</div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>clip-path: margin-box circle(25% at 25% 25%)</div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>clip-path: border-box circle(25% at 25% 25%)</div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>clip-path: padding-box circle(25% at 25% 25%)</div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>    <div>clip-path: content-box circle(25% at 25% 25%)</div>    <div>      <div>        <span>HTML</span>        <div>          <p>Я люблю<br /><em>разные формы</em></p>        </div>      </div>      <div>        <span>SVG</span>        <div>          <svg viewBox="0 0 192 192">            <g>              <rect x="24" y="24" width="144" height="144" />              <text x="96" y="91">Я люблю</text>              <text x="96" y="109">разные формы</text>            </g>          </svg>        </div>      </div>    </div>  </div></div>

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 src="mdn.svg" alt="MDN logo" /><svg height="0" width="0">  <defs>    <clipPath>      <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>  <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);}

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