clip-path はCSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

試してみましょう

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" />    私の仲間と私は、夕食の後、11時までに彼の家に電話して迎えに行くことを決めていました。この運動神経の優れた若いフランス人は、パリのスポーツマンたちの小さなグループに所属しており、彼らは「気球」を趣味としています。通常のスポーツで得られるすべてのスリル、さらには猛スピードで走る「自動車」のスリルさえも尽くした後、この「エアロクラブ」のメンバーたちは、今では空で、あらゆる大胆な技に挑戦し、地上ではもはや得られない、神経を刺激する興奮を求めています。  </div></section>

section {  align-items: flex-start;}.example-container {  text-align: left;  padding: 20px;}#example-element {  float: left;  width: 150px;  margin: 20px;}

構文

/* キーワード値 */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 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: rect(5px 5px 160px 145px round 20%);clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);clip-path: xywh(0 5px 100% 75% round 15% 0);/* ボックスおよびシェイプ値の組み合わせ */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()

2 つの半径と位置を指定して楕円を定義します。

polygon()

SVG の塗りつぶし規則と頂点のセットを用いて多角形を定義します。

path()

SVG の塗りつぶし規則と SVG のパス定義を用いてシェイプを定義します。

rect()

参照ボックスの縁からの指定距離を使用して長方形を定義します。

shape()

オプションの SVG 塗りつぶしルールと、行、曲線、円弧用の図形コマンドを使用して図形を定義します。

xywh()

参照ボックスの上端と左端からの指定距離、および長方形の幅と高さを指定して、長方形を定義します。

<geometry-box>

<basic-shape> と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形（border-radius など）を含めてクリッピングパスにします。ジオメトリーボックスは以下の値のうちの一つが指定できます。

margin-box

マージンボックスを参照ボックスとして使用します。

border-box

境界ボックスを参照ボックスとして使用します。

padding-box

パディングボックスを参照ボックスとして使用します。

content-box

コンテンボックスを参照ボックスとして使用します。

fill-box

オブジェクトの境界ボックスを参照ボックスとして使用します。

stroke-box

ストロークの境界ボックスを参照ボックスとして使用します。

view-box

最も近い SVG のビューポートを参照ボックスとして使用します。 SVG のビューポートを作成する要素にviewBox 属性が指定されている場合、参照ボックスはviewBox 属性で指定された座標系の原点に位置し、参照ボックスの寸法はviewBox 属性の width および height 値に設定されます。

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

例

シェイプと形状ボックス

この例では、polygon() をクリップパスとして<div> 要素に定義して、 2 つの三角形を作成しています。それぞれの三角形は、単色の背景と太い境界線を持っています。 2 番目の<div> 要素は、その参照ボックスをcontent-box に設定しています。

HTML

<div></div><div></div>

CSS

body {  display: flex;  gap: 20px;  flex-flow: row wrap;}

div {  height: 200px;  width: 200px;  box-sizing: border-box;  background-color: rebeccapurple;  border: 20px solid magenta;  clip-path: polygon(50% 0, 100% 100%, 0 100%);}div:last-of-type {  clip-path: content-box polygon(50% 0, 100% 100%, 0 100%);}

結果

最初の三角形では、参照ボックスを指定していないため、既定ではborder-box となり、 0% および 100% の位置は境界線の外側の端になります。 2 つ目の例では、<geometry-box> をcontent-box に設定しました。これは、基本シェイプの参照ボックスが、パディングボックスの内側にあるコンテンツ領域の外側の境界線であるということになります。この例にはpadding がないため、これは境界線の内側の辺になります。

shape() 関数とpath() 関数

前回の例を拡張して、異なる<basic-shape> 値を持つ同じ三角形を作成し、shape() およびpath() 関数を使用してクリップパスを作成する方法、およびshape() がより柔軟なソリューションである点を示します。

最初の要素のクリップパスを定義するにはpath() を使用し、2 つ目の要素のクリップパスを定義するにはshape() を使用します。どちらも、既定のborder-box を参照ボックスとして使用します。

div {  clip-path: path("M100 0 L200 200 L0 200 Z");}div:last-of-type {  clip-path: shape(from 50% 0, line to 100% 100%, line to 0 100%, close);}

その結果、shape() 関数で定義されたパスは要素とともに伸長しますが、path() バージョンでは伸長しません。

shape() 関数は<percentage> 値（およびカスタムプロパティ）が使用できるため、より堅牢です。

基盤となる要素のサイズを大きくして、これを示します。

div {  width: 250px;  height: 250px;}

shape() 関数で定義されたクリップパスの 4 つの境界線の可視性、あるいは少なくとも部分的な可視性は、パーセント値によってパスが要素とともに伸長するためです。path() バージョンでは、要素は伸長しましたが、シェイプは伸長しませんでした。その結果、上と左の境界線は部分的に表示され、右と下の境界線は切り取られています。

クリップソースとしての SVG

この例では、 SVG の<clipPath> 要素を定義してclip-path のソースとして使用しています。

HTML

ここでは 2 つの<div> 要素と、2 つの<clipPath> 要素を含む<svg> 要素があります。1 つの<clipPath> には、ウィンドウペインを定義する 4 つの<rect> 要素が含まれており、中央に空白の空間が残っています。もう 1 つには、2 つの交差する<rect> 要素が含まれています。

<svg height="0" width="0">  <defs>    <clipPath>      <rect y="0" x="0" width="80" height="80" />      <rect y="0" x="120" width="80" height="80" />      <rect y="120" x="0" width="80" height="80" />      <rect y="120" x="120" width="80" height="80" />    </clipPath>    <clipPath>      <rect y="0" x="80" width="40" height="200" />      <rect y="80" x="0" width="200" height="40" />    </clipPath>  </defs></svg><div>Window</div><div>Cross</div>

CSS

フレックスボックスを使用して、利用可能な空間がある場合に、要素を隙間を空けて横に並べるようにしています。<div> 要素の両方にconic-gradient() 背景画像を定義し、border とともに、クリップしたときの興味深い視覚効果を提供しています。

body {  display: flex;  gap: 20px;  flex-flow: row wrap;  font: 2em sans-serif;}div {  width: 200px;  height: 200px;  background-image: conic-gradient(    at center,    rebeccapurple,    green,    lightblue,    rebeccapurple  );  border: 5px solid;  box-sizing: border-box;}

次に、<clipPath> のid を<clip-source> として設定します。cross の例では、align-content を使用してテキストを垂直方向に中央に配置しています。そうしないと、window の例のようにテキストがクリップされてしまいます。

.window {  clip-path: url(#window);}.cross {  clip-path: url(#cross);  align-content: center;}

結果

境界線やテキストを含む要素はクリップされ、<clipPath> 要素と重なる部分のみがページに描画されます。

様々な値の型

この例では、 HTML の<img> をクリップするclip-path プロパティのさまざまな値を示しています。

HTML

HTML には、クリップされる<img>、星形の<clipPath>、およびclip-path プロパティの値を選択するための<select> 要素が含まれます。

<img   src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"  alt="Pride flag" /><svg height="0" width="0">  <defs>    <clipPath>      <path d="M100,0 42,180 196,70 4,70 158,180z" />    </clipPath>  </defs></svg><select>  <option value="none">none</option>  <option value="circle(100px at 110px 100px)">circle</option>  <option value="url(#star)" selected>star</option>  <option value="inset(20px round 20px)">inset</option>  <option value="rect(20px 150px 200px 20px round 10%)">rect</option>  <option value="xywh(0 20% 90% 67% round 0 0 5% 5px)">xywh</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>

<pre></pre>

CSS

初期レンダリングには、clip-path ソースとして星が含まれます。

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

JavaScript

<select> メニューから新しいオプションを選択すると、イベントハンドラーが<img> に設定されているclip-path の値を更新します。

const clipPathSelect = document.getElementById("clipPath");clipPathSelect.addEventListener("change", (evt) => {  const path = evt.target.value;  document.getElementById("clipped").style.clipPath = path;  log(`clip-path: ${path};`);});

function log(text) {  const logElement = document.querySelector("#log");  logElement.innerText = `${text}`;  logElement.scrollTop = logElement.scrollHeight;}

結果

clip-path の値を変更するには、別のオプションを選択してください。

仕様書

ブラウザーの互換性

関連情報

• clip-rule
• mask
• filter
• background-clip
• CSS クリップ入門
• CSS マスクモジュール
• SVG のclip-path 属性
• SVG 効果の HTML コンテンツへの適用