clip-path

ジャンプ先:
  1. 構文
  2. 例
  3. 仕様書
  4. ブラウザーの対応
  5. 関連情報

CSS の clip-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;

/* ジオメオリ値 */
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>
クリッピングパス要素を参照する <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

<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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 55
完全対応 55
完全対応 24
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 未対応 なしFirefox 完全対応 3.5IE 未対応 なしOpera 完全対応 42Safari 未対応 なしWebView Android 完全対応 55Chrome Android 完全対応 55
完全対応 55
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 未対応 なしFirefox Android 完全対応 4Opera Android 完全対応 42Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
完全対応 6.0
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
On SVG elementsChrome 完全対応 55Edge 完全対応 15
補足
完全対応 15
補足
補足 Edge only supports clip paths defined by url().
Firefox 完全対応 52IE 完全対応 あり
補足
完全対応 あり
補足
補足 Internet Explorer only supports clip paths defined by url().
Opera 完全対応 42Safari 未対応 なしWebView Android 完全対応 55Chrome Android 完全対応 55Edge Mobile 完全対応 12
補足
完全対応 12
補足
補足 Edge only supports clip paths defined by url().
Firefox Android 完全対応 52Opera Android 完全対応 42Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
<basic-shape>Chrome 完全対応 55Edge 未対応 なしFirefox 完全対応 54
完全対応 54
未対応 47 — ?
無効
無効 From version 47: 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 完全対応 42Safari 未対応 なしWebView Android 完全対応 55Chrome Android 完全対応 55Edge Mobile 未対応 なしFirefox Android 完全対応 54
完全対応 54
未対応 47 — ?
無効
無効 From version 47: 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 完全対応 42Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
path()Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 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.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なし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 未対応 なし
AnimationsChrome 完全対応 55Edge 未対応 なしFirefox 完全対応 49IE 未対応 なしOpera 完全対応 42Safari 未対応 なしWebView Android 完全対応 55Chrome Android 完全対応 55Edge Mobile 未対応 なしFirefox Android 完全対応 49Opera Android 完全対応 42Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
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 未対応 なしEdge Mobile 未対応 なし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 未対応 なし

凡例

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

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09, uknmr
最終更新者: mfuji09,