CSS - clip-path

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

概要

属性名 clip-path
値 <clip-source> | [ <basic-shape> || <geometry-box> ] | none
値の詳細 <geometry-box> = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box
初期値none
適用可能要素すべての要素。SVGでは、<defs> とグラフィック要素を除くコンテナ要素
継承継承しない
メディアvisual
アニメーション<basic-shape> に対してのみ有効

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3未3.524(-webkit)15(-webkit)7(-webkit)

説明

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

値説明
<clip-source>SVGの <clipPath> 要素への URL。例: url(resources.svg#c1)
<basic-shape>polygon() や circle() などの形状関数を指定します。
margin-boxマージンを含めた矩形を指定します。
border-boxボーダーラインを含めた矩形を指定します。
padding-boxパディングを含めた矩形を指定します。
content-boxパディングの内側。コンテント領域の矩形を指定します。
fill-boxオブジェクトバウンディングボックスをリファレンスボックスとして使用します。
stroke-boxストロークバウンディングボックスをリファレンスボックスとして使用します。
view-box直近の SVG ビューポイントをリファレンスボックスとして使用します。
noneクリッピングパスを指定しません。

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

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

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

CSS
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 は画像の中心を意味します。

CSS
clip-path: circle(50px at center);
clip-path: circle(20px at 30px 30px);
◆ ellipse([<r1> <r2>]? [at <position>]?)

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

CSS
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 の値を指定します。

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

使用例

CSS
.sample-none {
  -webkit-clip-path: none;
  clip-path: none;
  position: absolute;
  width: 100px;
  height: 100px;
  left: 10px;
  top: 10px;
}
.sample-polygon {
  -webkit-clip-path: polygon(50px 0px, 20px 100px, 100px 40px, 0px 40px, 80px 100px);
  clip-path: polygon(50px 0px, 20px 100px, 100px 40px, 0px 40px, 80px 100px);
  position: absolute;
  width: 100px;
  height: 100px;
  left: 130px;
  top: 10px;
}
HTML
<div style="position:relative; width:500px; height:120px; margin:1em; border:1px solid gray;">
  <img src="../image/back.gif" alt="" class="sample-none">
  <img src="../image/back.gif" alt="" class="sample-polygon">
</div>
表示

関連項目

clip

リンク

Copyright (C) 2015 杜甫々
初版：2015年11月1日、最終更新：2015年11月1日
http://www.tohoho-web.com/css/prop/clip-path.htm