clip-path

clip-pathプロパティとは

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

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

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

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

値の説明

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

clip-source

clipPath要素のurlです。

basic-shape

円や多角形などを指定します。

geometry-box

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

none

表示領域を指定しません。

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

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

clip-source

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

.test {
  clip-path: url("#clip1");
}

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は、半径です。

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

basic-shape

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

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

長方形

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

inset(length | percentage)

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

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

.test {
  clip-path: inset(100px 50px 30px 50px);
}

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

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

.test {
  clip-path: inset(20px round 20px);
}

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

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

円

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

circle(shape-radius at position)

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

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

.test {
  clip-path: circle(100px at 80px 60px);
}

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

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

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

楕円

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

ellipse(shape-radius at position)

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

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

.test {
  clip-path: ellipse(200px 100px at 80px 60px);
}

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

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

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

多角形

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

polygon(fill-rule , length | percentage)

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

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

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

.test {
  clip-path: polygon(100px 0, 30px 150px, 200px 50px, 0 50px, 150px 150px);
}

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

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

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

.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は、最初の位置、次の位置などで指定します。指定例は、以下のとおりです。

.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の利用例は、以下のとおりです。

.test {
  clip-path: content-box circle(100px at 100px 100px);
}

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

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

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

テキストでの利用

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

<p class="test">春になると木漏れ日が差し、草花は土の中から顔を出します。夏になると、太陽は草花に喜びを与えます。秋になると、草花は実をなして恵を与えます。冬になると雪が降り、草花は種となって土の中で眠ります。</p>

CSSは、以下とします。

.test {
  clip-path: inset(10%);
}

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

ブラウザのサポート状況

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

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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