clip-path

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;

/* <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> ] | nonewhere 
<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 の比較

<svg class="defs">
  <defs>
    <clipPath id="myPath" clipPathUnits="objectBoundingBox">
      <path d="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" />
    </clipPath>
  </defs>
</svg>

<div class="grid">
  <div class="col">
    <div class="note">clip-path: none</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="none">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="none">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: url(#myPath)<br><br>
      Assuming the following clipPath definition:
      <pre>
&lt;svg&gt;
  &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
    &lt;path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" /&gt;
  &lt;/clipPath&gt;
&lt;/svg&gt;</pre>
    </div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="svg">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
    </div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="svg2">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>



    <div class="note">clip-path: circle(25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape1">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape1">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape2">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape3">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape3">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape4">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape4">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape5">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape5">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape6">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape6">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape7">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape7">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape8">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape8">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell"> <span>HTML</span>
        <div class="container">
          <p class="shape9">
            I LOVE<br><em>clipping</em>
          </p>
        </div>
      </div>
      <div class="cell"> <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape9">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
  background: #EEE;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 auto;
}

.cell {
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
  flex: 1;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em .5em 0;
  font: .8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  display: inline-block;
  border: 1px dotted grey;
  position:relative;
}

.container:before {
  content: 'margin';
  position: absolute;
  top: 2px;
  left: 2px;
  font: italic .6em sans-serif;
}

.viewbox {
  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
}

.container.viewbox:after {
  content: 'viewbox';
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic .6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: .5em;
}

p {
  font-family: sans-serif;
  background: #000;
  color: pink;
  margin: 2em;
  padding: 3em 1em;
  border: 1em solid pink;
  width: 6em;
}

.none { clip-path: none; }
.svg  { clip-path: url(#myPath); }
.svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');}
.shape1 { clip-path: circle(25%); }
.shape2 { clip-path: circle(25% at 25% 25%); }
.shape3 { clip-path: fill-box    circle(25% at 25% 25%); }
.shape4 { clip-path: stroke-box  circle(25% at 25% 25%); }
.shape5 { clip-path: view-box    circle(25% at 25% 25%); }
.shape6 { clip-path: margin-box  circle(25% at 25% 25%); }
.shape7 { clip-path: border-box  circle(25% at 25% 25%); }
.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
.shape9 { clip-path: content-box circle(25% at 25% 25%); }

.defs {
  width: 0;
  height: 0;
  margin: 0;
}

pre { margin-bottom: 0; }

svg {
  margin: 1em;
  font-family: sans-serif;
  width: 192px;
  height: 192px;
}

svg rect {
  stroke: pink;
  stroke-width: 16px;
}

svg text {
  fill: pink;
  text-anchor: middle;
}

svg text.em {
  font-style: italic;
}

完全な例

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);
}

JavaScript

var clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
  document.getElementById("clipped").style.clipPath = evt.target.value;
});

結果

仕様書

仕様書	状態	備考
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

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`clip-path`	Chrome 完全対応 55 完全対応 55 完全対応 23 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Edge 完全対応 12 補足完全対応 12 補足補足 Edge only supports clip paths defined by `url()`.	Firefox 完全対応 3.5	IE 完全対応 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 完全対応 4	Opera Android 完全対応 42 完全対応 42 完全対応 14 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Safari iOS 完全対応 9.3 完全対応 9.3 完全対応 6.1 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Samsung Internet Android 完全対応 6.0 完全対応 6.0 完全対応 1.5 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要
Animations	Chrome 完全対応 55	Edge 未対応なし	Firefox 完全対応 49	IE 未対応なし	Opera 完全対応 42	Safari 未対応なし	WebView Android 完全対応 55	Chrome Android 完全対応 55	Firefox Android 完全対応 49	Opera Android 完全対応 42	Safari iOS 未対応なし	Samsung Internet Android 完全対応 6.0
`<basic-shape>`	Chrome 完全対応 23	Edge 未対応なし	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 完全対応 15	Safari 完全対応 6.1	WebView Android 完全対応 4.4	Chrome Android 完全対応 25	Firefox 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 完全対応 14	Safari iOS 完全対応 6.1	Samsung Internet Android 完全対応 1.5
`fill-box` and `stroke-box`	Chrome 未対応なし	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 elements	Chrome 完全対応 23	Edge 未対応なし	Firefox 完全対応 3.5	IE 未対応なし	Opera 完全対応 15	Safari 完全対応 6.1	WebView Android 完全対応 4.4	Chrome Android 完全対応 25	Firefox Android 完全対応 4	Opera Android 完全対応 14	Safari iOS 完全対応 6.1	Samsung 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 elements	Chrome 完全対応 23	Edge 完全対応 12	Firefox 完全対応 52	IE 完全対応 10	Opera 完全対応 15	Safari 完全対応 6.1	WebView Android 完全対応 4.4	Chrome Android 完全対応 25	Firefox Android 完全対応 52	Opera Android 完全対応 14	Safari iOS 完全対応 6.1	Samsung Internet Android 完全対応 1.5

凡例

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