clip-path プロパティ
clip-path プロパティは、切り抜き表示を指定するプロパティです。
エレメントを四角形、円形や SVG ソースなどで切り抜きをしたように表示できます。
clip-path プロパティは、エレメントが絶対位置position:absolute;またはposition:fixed;でなければなりません。 元の大きさをwidth、heightプロパティで指定しておきます。
エレメントがoverflow：visible;では clip-path プロパティは機能しません。
position: absolute;
width: 200px;
height: 200px;
clip-path: ellipse(50% 30% at 50% 50%);
詳しくは Example を参照してください
ページ内 Index
構文(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-source | url() 形状を指定したファイルを読み込む |
| 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-box | margin-boxとして |
| border-box | border-boxとして |
| padding-box | padding-boxとして |
| content-box | content-boxとして |
| fill-box | オブジェクトの境界ボックスとして |
| stroke-box | ストロークの境界ボックスとして |
| view-box | SVG のビューポートを参照ボックスとして |
備考（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 線が見えていないことからエレメントの一部を表示していることが分かります。