CSS - clip-path

• トップ
• CSSリファレンス
• clip-path

概要

説明

矩形、円形、楕円形、星型などの領域をクリップ(抜き出し)し、表示します。position:absolute または position:fixed を適用した要素に対してのみ有効です。CSS2 では clip が定義されていましたが、CSS3 からは clip-path に移行する予定です。現時点ではまだ一部のブラウザでしかサポートされていません。Firefox では url() 指定のみサポートしています。

<basic-shape>

<basic-shape> には下記などを指定します。

rect([<length-percentage> | auto ]{4} [round <border-radius> ]?)

4つの数値は top, right, bottom, left の位置を長さまたはパーセントで指定します。auto を指定すると自動計算されます。round には角の丸さを指定します。

clip-path: rect(10px 80px 80px 10px round 20%);

polygon([<fill-rule>,]? <x1> <y1>, ...)

<fill-rule> には塗りつぶしルールを nonzero または evenodd で指定します。省略時は nonzero になります。<x1>, <y1> で、マスキングする形状の点を指定します。

clip-path: polygon(50px 0px, 20px 100px, 100px 40px, 0px 40px, 80px 100px);
clip-path: polygon(nonzero, 50px 0px, 20px 100px, 100px 40px, 0px 40px, 80px 100px);
clip-path: polygon(evenodd, 50px 0px, 20px 100px, 100px 40px, 0px 40px, 80px 100px);

circle([<shape-radius>]? [at <position>]?)

円形を指定します。<shape-radius> には半径を指定します。<position> には中心点を指定します。center は画像の中心を意味します。

clip-path: circle(50px at center);
clip-path: circle(20px at 30px 30px);

ellipse([<r1> <r2>]? [at <position>]?)

楕円を指定します。<r1>, <r2> には横方向、縦方向の半径を指定します。<position> には中心点を指定します。center は画像の中心を意味します。

clip-path: ellipse(20px 30px at center);
clip-path: ellipse(20px 30px at 50px 50px);

inset(<shape-arg>{1,4} [round <border-radius>]?)

<shape-arg> には、top, right, bottom, left のオフセットを指定します。<border-radius> には border-radius の値を指定します。

clip-path: inset(5px 8px 10px 12px round 10px);

path(<path>)

x座標、y座標のポイントを指定してパスを描画します。詳細は SVG:path を参照してください。

clip-path: path("M35,119 L105,119 127,51 70,10 13,51 35,119");

使用例

.my-example {
  img {
    width: 100px;
    height: 100px;
  }
  .sample-none {
    clip-path: none;
  }
  .sample-polygon {
    clip-path: polygon(50px 0px, 20px 100px, 100px 40px, 0px 40px, 80px 100px);
  }
  .sample-rect {
    clip-path: rect(10px 90px 90px 10px round 20%);
  }
}

<div class="my-example">
  <img src="example.png" alt="example" class="sample-none">
  <img src="example.png" alt="example" class="sample-polygon">
  <img src="example.png" alt="example" class="sample-rect">
</div>

関連項目

リンク

• http://www.w3.org/TR/css-masking/#clipping-paths
• http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes
• https://developer.mozilla.org/ja/docs/Web/CSS/clip-path
• http://caniuse.com/#feat=css-clip-path