This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

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 г..

Learn more
See full compatibility

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

Синтаксис

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> 

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

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

<basic-shape-rect> = 
 <inset()> | 
 <rect()> | 
 <xywh()> 

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

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

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

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

<shape()> = 
 shape( <'fill-rule'> ? from <position> , <shape-command># ) 

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

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

<rect()> = 
 rect( <top> , <right> , <bottom> , <left> ) 

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

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

<position> = 
 <position-one> | 
 <position-two> | 
 <position-four> 

<fill-rule> = 
 nonzero | 
 evenodd 

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

<shape-command> = 
 <move-command> | 
 <line-command> | 
 close | 
 <horizontal-line-command> | 
 <vertical-line-command> | 
 <curve-command> | 
 <smooth-command> | 
 <arc-command> 

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

<border-radius> = 
 <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ] ? 

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

<position-one> = 
 left | 
 center | 
 right | 
 top | 
 bottom | 
 x-start | 
 x-end | 
 y-start | 
 y-end | 
 block-start | 
 block-end | 
 inline-start | 
 inline-end | 
 <length-percentage> 

<position-two> = 
 [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] | 
 [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] | 
 [ block-start | center | block-end ] && [ inline-start | center | inline-end ] | 
 [ start | center | end ] {2} 

<position-four> = 
 [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] | 
 [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] | 
 [ [ start | end ] <length-percentage> ] {2} 

<move-command> = 
 move <command-end-point> 

<line-command> = 
 line <command-end-point> 

<horizontal-line-command> = 
 hline [ to [ <length-percentage> | left | center | right | x-start | x-end ] | by <length-percentage> ] 

<vertical-line-command> = 
 vline [ to [ <length-percentage> | top | center | bottom | y-start | y-end ] | by <length-percentage> ] 

<curve-command> = 
 curve [ [ to <position> with <control-point> [ / <control-point> ] ? ] | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ] ? ] ] 

<smooth-command> = 
 smooth [ [ to <position> [ with <control-point> ] ? ] | [ by <coordinate-pair> [ with <relative-control-point> ] ? ] ] 

<arc-command> = 
 arc <command-end-point> [ [ of <length-percentage>{1,2} ] && <arc-sweep>? && <arc-size>? && [ rotate <angle> ] ? ] 

<command-end-point> = 
 to <position> | 
 by <coordinate-pair> 

<control-point> = 
 <position> | 
 <relative-control-point> 

<coordinate-pair> = 
 <length-percentage>{2} 

<relative-control-point> = 
 <coordinate-pair> [ from [ start | end | origin ] ] ? 

<arc-sweep> = 
 cw | 
 ccw 

<arc-size> = 
 large | 
 small

Примеры

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

<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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="none">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</text>
 </g>
 </svg>
 </div>
 </div>
 </div>
 <div class="note">
 clip-path: url(#myPath)<br /><br />
 Для этого примера определим такой вспомогательный элемент:
 <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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="svg">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</text>
 </g>
 </svg>
 </div>
 </div>
 </div>
 <div class="note">
 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 class="row">
 <div class="cell">
 <span>HTML</span>
 <div class="container">
 <p class="svg2">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="svg2">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="shape1">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="shape2">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="shape3">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="shape4">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="shape5">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="shape6">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="shape7">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="shape8">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</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">Я люблю<br /><em>разные формы</em></p>
 </div>
 </div>
 <div class="cell">
 <span>SVG</span>
 <div class="container view-box">
 <svg viewBox="0 0 192 192">
 <g class="shape9">
 <rect x="24" y="24" width="144" height="144" />
 <text x="96" y="91">Я люблю</text>
 <text x="96" y="109" class="em">разные формы</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 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);
}

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

Результат

[フレーム]

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

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

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

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

Shapes in clipping and masking – and how to use them
Применение эффектов SVG к содержимому HTML
CSS-свойства:
- mask
- filter
Атрибуты SVG:
- clip-path
- clip-rule

Help improve MDN

Learn how to contribute

This page was last modified on 30 июн. 2026 г. by MDN contributors.

View this page on GitHub • Report a problem with this content