clip-path

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

構文

/* キーワード値 */
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> 値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとして border-box が使用されます。
<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
クリッピングパスは作成されません。

メモ: 計算値が none 以外の場合は、 opacity が 1 以外の値の場合と同様、新しい重ね合わせコンテキストを生成します。

形式文法

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

where
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

where
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

where
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

HTML と SVG の比較

完全な例

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>
  <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

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

結果

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
clip-path の定義
勧告候補 適用範囲を HTML 要素に拡張。 clip-path プロパティが非推奨の clip プロパティを置き換えた。
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
clip-path の定義
勧告 初回定義 (SVG 要素のみに適用)。
初期値none
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
パーセンテージrefer to reference box when specified, otherwise border-box
メディア視覚
計算値as specified, but with url values made absolute
アニメーションの種類yes, as specified for basic-shape, otherwise no
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
clip-pathChrome 完全対応 55
完全対応 55
完全対応 23
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
補足
完全対応 12
補足
補足 Edge only supports clip paths defined by url().
Firefox 完全対応 3.5IE 完全対応 10
補足
完全対応 10
補足
補足 Internet Explorer only supports clip paths defined by url().
Opera 完全対応 42
完全対応 42
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 9.1
完全対応 9.1
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 55
完全対応 55
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 55
完全対応 55
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 4Opera Android 完全対応 42
完全対応 42
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 9.3
完全対応 9.3
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 6.0
完全対応 6.0
完全対応 1.5
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
AnimationsChrome 完全対応 55Edge 未対応 なしFirefox 完全対応 49IE 未対応 なしOpera 完全対応 42Safari 未対応 なしWebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 49Opera Android 完全対応 42Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
<basic-shape>Chrome 完全対応 23Edge 未対応 なしFirefox 完全対応 54
完全対応 54
未対応 47 — 54
無効
無効 From version 47 until version 54 (exclusive): this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 4.4Chrome Android 完全対応 25Firefox Android 完全対応 54
完全対応 54
未対応 47 — 54
無効
無効 From version 47 until version 54 (exclusive): this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5
fill-box and stroke-boxChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 51
補足
完全対応 51
補足
補足 This value was supported before Firefox 51, but as an alias to border-box.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 51
補足
完全対応 51
補足
補足 This value was supported before Firefox 51, but as an alias to border-box.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
On HTML elementsChrome 完全対応 23Edge 未対応 なしFirefox 完全対応 3.5IE 未対応 なしOpera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 4.4Chrome Android 完全対応 25Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5
path()Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 71
完全対応 71
完全対応 63
無効
無効 From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 63
無効
完全対応 63
無効
無効 From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
On SVG elementsChrome 完全対応 23Edge 完全対応 12Firefox 完全対応 52IE 完全対応 10Opera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 4.4Chrome Android 完全対応 25Firefox Android 完全対応 52Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報