備忘録的プログラミングリファレンス

clip-pathプロパティ

　clip-pathプロパティは、切り抜き表示を指定するプロパティです。
エレメントを四角形、円形やSVGソースなどで切り抜きをしたように表示できます。

　clip-pathプロパティは、エレメントが絶対位置position:absolute;またはposition:fixed;でなければなりません。 元の大きさをwidth、heightプロパティで指定しておきます。

　エレメントがoverflow：visible;ではclip-pathプロパティは機能しません。

楕円形に切り抜き表示（中心を50%、50%の位置に、幅を50%、高さを30%の大きさに）
position: absolute;
width: 200px;
height: 200px;
clip-path: ellipse(50% 30% at 50% 50%);

構文(Syntax)

CSS

clip-path: none | clip-source | basic-shape | geometry-box ;

DOM(JavaScript)

値の取得
String = object.style.clipPath;
値の設定
object.style.clipPath=" none | clip-source | basic-shape | geometry-box ";

値（Values）

Value摘要
none初期値（default値）
clip-sourceurl() 形状を指定したファイルを読み込む
basic-shape以下のbasic-shape一覧を参照
geometry-box以下のgeometry-box一覧を参照

basic-shape一覧

basic-shape名形状と設定値
inset()オフセット　数値または％で、１から４つの値で左右上下の指定可　roundで角丸にできる
circle()円形　circle(大きさを数値または%　at 中心位置)
ellipse()楕円形　ellipse(大きさを数値または%　at 中心位置)
polygon()多角形 各角の位置を数値または％で半時計回りに指定

geometry-box一覧

　上記のbasic-shapeと共に指定された場合は、切り抜きの領域を指定することができます。単独で使用すると辺や角をクリッピングパスとして扱います。

margin-boxmargin-boxとして
border-boxborder-boxとして
padding-boxpadding-boxとして
content-boxcontent-boxとして
fill-boxオブジェクトの境界ボックスとして
stroke-boxストロークの境界ボックスとして
view-boxSVG のビューポートを参照ボックスとして

備考（Remarks）

初期値（Default value）none
継承（Inherited）No
変化（Animatable）Yes　＊ただしbasic-shapeのみ

Example

　clip-pathの例です。 左側はclip-pathプロパティを設定しない場合の表示です。 右側はclip-pathプロパティを設定した場合の表示です。楕円形で切り抜き表示しています。
　エレメントをposition:absolute;またはposition:fixed;の絶対位置に、width、heightプロパティで大きさを指定しておく必要があります。
　clip-pathプロパティは、赤いborder線が見えていないことからエレメントの一部を表示していることが分かります。