This page was translated from English by the community.Learn more and join the MDN Web Docs community.
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년 1월.
* Some parts of this feature may have varying levels of support.
clip-pathCSS 속성은 요소의 클리핑 범위를 지정합니다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨집니다.
시도해 보기
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: 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: unset;clip-path 속성은 아래의 값을 하나 이상 조합해 지정할 수 있습니다.
값
<clip-source>SVG
<clipPath>요소를 가리키는<url>.<basic-shape><geometry-box>값으로 크기와 위치가 정해지는 도형.<geometry-box>를 지정하지 않는다면border-box를 참조 박스로 사용합니다.<geometry-box><basic-shape>와 함께 지정하면,<basic-shape>의 참조 박스를 정의합니다. 단독으로 지정한 경우, 값으로 주어진 상자와 그 상자의 모서리 형태(border-radius등)를 클리핑 패스로 적용합니다. 가능한 값은 다음과 같습니다.margin-box바깥 여백 상자를 참조로 사용합니다.
border-box테두리 상자를 참조로 사용합니다.
padding-box안쪽 여백 상자를 참조로 사용합니다.
content-box콘텐츠 상자를 참조로 사용합니다.
fill-box객체의 바운딩 상자를 참조로 사용합니다.
stroke-box테두리 바운딩 상자를 참조로 사용합니다.
view-box가장 가까운 SVG 뷰포트를 참조 상자로 사용합니다. SVG 뷰포트를 생성한 요소가
viewBox속성을 가진 경우, 참조 상자의 위치는viewBox속성이 정의하는 좌표계의 원점에 위치하고, 크기는viewBox속성의 너비와 높이 값과 동일합니다.none클리핑 패스를 생성하지 않습니다.
형식 구문
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
Examples
Comparison of HTML and 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>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</text> </g> </svg> </div> </div> </div> <div> clip-path: url(#myPath)<br /><br /> Assuming the following clipPath definition: <pre><svg> <clipPath clipPathUnits="objectBoundingBox"> <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" /> </clipPath></svg></pre > </div> <div> <div> <span>HTML</span> <div> <p>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</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>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</text> </g> </svg> </div> </div> </div> <div>clip-path: circle(25%)</div> <div> <div> <span>HTML</span> <div> <p>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</text> </g> </svg> </div> </div> </div> <div>clip-path: circle(25% at 25% 25%)</div> <div> <div> <span>HTML</span> <div> <p>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</text> </g> </svg> </div> </div> </div> <div>clip-path: fill-box circle(25% at 25% 25%)</div> <div> <div> <span>HTML</span> <div> <p>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</text> </g> </svg> </div> </div> </div> <div>clip-path: stroke-box circle(25% at 25% 25%)</div> <div> <div> <span>HTML</span> <div> <p>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</text> </g> </svg> </div> </div> </div> <div>clip-path: view-box circle(25% at 25% 25%)</div> <div> <div> <span>HTML</span> <div> <p>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</text> </g> </svg> </div> </div> </div> <div>clip-path: margin-box circle(25% at 25% 25%)</div> <div> <div> <span>HTML</span> <div> <p>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</text> </g> </svg> </div> </div> </div> <div>clip-path: border-box circle(25% at 25% 25%)</div> <div> <div> <span>HTML</span> <div> <p>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</text> </g> </svg> </div> </div> </div> <div>clip-path: padding-box circle(25% at 25% 25%)</div> <div> <div> <span>HTML</span> <div> <p>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</text> </g> </svg> </div> </div> </div> <div>clip-path: content-box circle(25% at 25% 25%)</div> <div> <div> <span>HTML</span> <div> <p>I LOVE<br /><em>clipping</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">I LOVE</text> <text x="96" y="109">clipping</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;}.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 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;}Complete example
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;});Result
명세서
| Specification |
|---|
| CSS Masking Module Level 1 # the-clip-path |
브라우저 호환성
See also
- Shapes in clipping and masking – and how to use them
- CSS properties:
mask,filter - Applying SVG effects to HTML content
- SVG attributes: