clip-path

CSSでは、要素の表示する領域を指定することができます。

本ページでは、clip-pathプロパティについて説明します。

clip-pathプロパティとは

clip-pathプロパティは、要素の表示する領域を指定することができます。例えば、指定した円や多角形の中だけコンテンツを表示することができます。

写真の一部だけを表示させることができる。

clip-pathの定義は、以下のとおりです。

【clip-pathの定義】
clip-source | basic-shape | geometry-box | none
初期値 none
適用対象 すべての要素。 SVGでは、defs要素、すべてのグラフィック要素、use要素を除くコンテナ要素。
継承 しない

basic-shapeとgeometry-boxは、半角スペースに続けて記述することで、同時に使うことができます。

clipプロパティが非推奨になったため、代わりにclip-pathプロパティを使うことが推奨されています。

値の説明

以下は、clip-pathで使える値と説明です。

clip-source
clipPath要素のurlです。
basic-shape
円や多角形などを指定します。
geometry-box
コンテンツの表示領域をパディングボックスなどで指定します。basic-shapeと同時に指定した場合、円や多角形で指定する基点になります。
none
表示領域を指定しません。

次からは、none以外で各値の利用例を示します。

なお、利用している画像のデフォルトの表示は、以下です。

木の上の家が横幅300pxで表示されています。

clip-source

clip-sourceの利用例は、以下のとおりです。

【clip-sourceの利用例】
.test {
  clip-path: url("#clip1");
}

HTMLは、以下とします。

【clip-sourceの利用を示すためのHTML】
<svg>
<clipPath id="clip1">
  <circle cx="100" cy="100" r="100">
</clipPath>
</svg>

<img src="images/image1.png" alt="説明" class="test">

svg要素で円を描いています。cxとcyは円の中心で、単位はpxです。rは、半径です。

上記は、以下のように表示されます。

画像が、半径100pxの円の内部だけ表示されています。中心は、左から100px、上から100pxの位置です。

basic-shape

次からは、basic-shapeで指定できる形状を説明します。なお、HTMLは以下とします。

【basic-shapeの利用を示すためのHTML】
<img src="images/image1.png" alt="説明" class="test">

長方形

長方形は、以下の構文で指定します。

inset(length | percentage)

marginと同じで、1つから4つの値を指定できます。4つ指定した場合は、上、右、下、左の順で指定したことになります。

指定例は、以下のとおりです。

【insetの利用例】
.test {
  clip-path: inset(100px 50px 30px 50px);
}

上記は、上から100px、右から50px、下から30px、左から50pxを切り取って表示します。これは、以下のように表示されます。

画像が、上から100px、右から50px、下から30px、左から50px切り取られて表示されています。

また、以下のように指定もできます。

【insetでの利用例】
.test {
  clip-path: inset(20px round 20px);
}

roundの後は、角に丸みを持たせて表示する時の半径を指定します。上記は、以下のように表示されます。

画像の4つの角が、丸みを帯びて表示されています。

roundの後は、上右下左の順に4つまで指定できます。指定方法は、marginと同じです。また、10px / 20pxのように指定すると、水平半径が10px、垂直半径が20pxの楕円になります。

円は、以下の構文で指定します。

circle(shape-radius at position)

shape-radiusは、半径です。positionはオプションで、中心の位置です。

指定例は、以下のとおりです。

【circleの利用例】
.test {
  clip-path: circle(100px at 80px 60px);
}

100pxが半径、80pxと60pxは円の中心を示します。80pxが左からの位置、60pxが上からの位置です。

上記は、以下のように表示されます。

画像が、半径100pxの円の内部だけ表示されています。中心は、上から80px、左から60pxの位置です。

半径は、closest-sideとfarthest-sideキーワードが使えます。closest-sideは、4辺で最も近いところまでを半径にします。farthest-sideは、最も遠いところまでを半径にします。

楕円

楕円は、以下の構文で指定します。

ellipse(shape-radius at position)

shape-radiusは、半径です。水平半径、垂直半径の順に記述します。positionはオプションで、中心の位置です。

指定例は、以下のとおりです。

【ellipseの利用例】
.test {
  clip-path: ellipse(200px 100px at 80px 60px);
}

200pxが水平半径、100pxが垂直半径、80pxと60pxは楕円の中心の位置を示します。80pxが左からの位置、60pxは上からの位置です。

上記は、以下のように表示されます。

画像が、水平半径200px、垂直半径100pxの楕円の内部だけ表示されています。中心は、上から80px、左から60pxの位置です。

circleと同じで、closest-sideとfarthest-sideキーワードが使えます。その際、水平半径と垂直半径で別々に指定します。

多角形

多角形は、以下の構文で指定します。

polygon(fill-rule , length | percentage)

fill-ruleは、形状の内部表現です。nonzeroかevenoddが指定できます。デフォルトは、nonzeroです。

多角形の頂点はx yのペアとして、カンマ(,)を区切りにして複数指定します。また、最後の頂点から最初の頂点までは、線が結ばれます(図形が閉じます)。

指定例は、以下のとおりです。

【polygonの利用例】
.test {
  clip-path: polygon(100px 0, 30px 150px, 200px 50px, 0 50px, 150px 150px);
}

上記は、以下のように表示されます。

画像が、星型の内部だけ表示されています。星型は、指定した順番に線を引いて描いていることが説明されています。

赤の矢印の順番で多角形を描いていて、その内部を表示しています。

なお、以下のようにfill-ruleをevenoddにしたとします。

【polygonの利用例】
.test {
  clip-path: polygon(evenodd, 100px 0, 30px 150px, 200px 50px, 0 50px, 150px 150px);
}

上記は、以下のように表示されます。

画像が、星型の内部だけ表示されていますが、星の線が重なる内部は画像が表示されていません。

先ほどの描く矢印で、重なっている真ん中の部分は表示領域になりません。

SVGパス

SVGパスは、以下の構文で指定します。

path(fill-rule, string)

fill-ruleは、polygonの時と同じです。stringは、最初の位置、次の位置などで指定します。指定例は、以下のとおりです。

【pathの利用例】
.test {
  clip-path: path("M 100 0 L 30 150 L 200 50 L 0 50 L 150 150 z");
}

Mが最初の位置、Lが次の位置、zは最初の位置に戻る指定です。

上記は、多角形の時と同じ星型が表示領域になります。

geometry-box

geometry-boxの利用例は、以下のとおりです。

【pathの利用例】
.test {
  clip-path: content-box circle(100px at 100px 100px);
}

赤字のcontent-boxが、geometry-boxとしての指定値です。上記により、コンテンツボックスの左から100px、上から100pxが中心の半径100pxの範囲が表示されます。

利用できる値は、以下のとおりです。

【geometry-boxで利用できる値】
説明
content-box コンテンツボックス
padding-box パディングボックス
border-box ボーダーボックス
margin-box マージンボックス

各ボックスの意味については、「ボックスモデル」をご参照ください。

テキストでの利用

これまでは、画像に対する表示を説明してきましたが、テキストに対しても同じです。例えば、以下のHTMLがあったとします。

【テキストに対するclip-path利用を示すためのHTML】
<p class="test">春になると木漏れ日が差し、草花は土の中から顔を出します。夏になると、太陽は草花に喜びを与えます。秋になると、草花は実をなして恵を与えます。冬になると雪が降り、草花は種となって土の中で眠ります。</p>

CSSは、以下とします。

【テキストに対するclip-path利用を示すためのCSS】
.test {
  clip-path: inset(10%);
}

上記は、以下のように表示されます。

段落の文章が、上下左右10%切り取られて表示されています。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
clip-path
path() × × × × ×
【スマートフォン】
項目 Sa An Op Ch Fx Sm
clip-path
path() × × × × × ×
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る