---
title: clip-path
slug: Web/CSS/clip-path
translation_of: Web/CSS/clip-path
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>clip-path</strong></code> создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (<code><a href="https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/circle">circle()</a></code>).</p>
<div class="note">
<p><strong>Историческая справка:</strong> Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .</p>
</div>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<div class="hidden" id="clip-path">
<pre class="brush: html"><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></pre>
<p>mlk</p>
<pre class="brush: 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 {
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;
}</pre>
</div>
<p>{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}</p>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<p>Свойство <code>clip-path</code> определяется как одно или комбинация значений перечисленных ниже.</p>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>url()</code></dt>
<dd>Представляет URL ссылку на траекторию, ограничивающую элемент.</dd>
<dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt>
<dd>Функция {{cssxref("<basic-shape>")}}. Размер и положение области определяется значением <code><geometry-box></code>. Если геометрия не определена,<code>border-box</code> будет использоваться в качестве блока.</dd>
<dt><code><geometry-box></code></dt>
<dd>Если определён в комбинации с <code><basic-shape></code>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений:
<dl>
<dt><code>fill-box</code></dt>
<dd>Использует границы объекта в качестве базовой области.</dd>
<dt><code>stroke-box</code></dt>
<dd>Использует stroke bounding box в качестве базовой области.</dd>
<dt><code>view-box</code></dt>
<dd>Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определён для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом <code>viewBox</code> и ширина и высота базового блока устанавливаются равными значениям атрибута <code>viewBox</code>.</dd>
<dt><code>margin-box</code></dt>
<dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> в качестве базового блока.</dd>
<dt><code>border-box</code></dt>
<dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">border box</a> в качестве базового блока.</dd>
<dt><code>padding-box</code></dt>
<dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">padding box</a> в качестве базового блока.</dd>
<dt><code>content-box</code></dt>
<dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">content box</a> в качестве базового блока.</dd>
</dl>
</dd>
<dt><code>none</code></dt>
<dd>Обрезанная область не создается.</dd>
</dl>
<h3 id="Формальный_синтаксис.">Формальный синтаксис.</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<pre class="brush:css">/* 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);
}</pre>
<h2 id="Живой_пример">Живой пример</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">#clipped {
margin-bottom: 20px;
clip-path: url(#cross);
}
</pre>
<div class="hidden">
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
document.getElementById("clipped").style.clipPath = evt.target.value;
});
</pre>
</div>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample("Live_sample", 230, 250)}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
<td>{{Spec2('CSS Masks')}}</td>
<td>Extends its application to HTML elements.</td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Initial definition (applies to SVG elements only).</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость">Совместимость</h2>
<p>{{Compat("css.properties.clip-path")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a>, {{cssxref("mask")}}, {{cssxref("filter")}}</li>
<li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li>
<li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li>
<li>{{SVGAttr("clip-path")}} SVG attribute</li>
</ul>