トップページ  > CSS  > clip-path

★CSSリファレンス

clip-path …… 要素をクリッピング(切り抜き)する
Google Chrome Firefox Opera
広告

clip-pathプロパティは、要素をクリッピング(切り抜き)する際に使用します。 clip-pathプロパティで要素をクリッピングすると、指定したクリッピング領域の外側が非表示となって内側だけが表示されます。

クリッピング領域の形状には、長方形、円、楕円、多角形を指定することができます。 以下の形状関数で指定します。

クリッピング領域を生成する際の対象ボックスは、以下のキーワードで指定します。

尚、clipプロパティは廃止されました。 代わりに clip-pathプロパティを使用することが推奨されています。

■値

以下の値を1つ、または、組み合わせて指定

none
クリッピングパスは生成されない(初期値)
URL
クリッピングパスとなる要素をURLで指定
クリッピング形状を指定する関数
inset() … 内側へのオフセット(通常は長方形となる)
circle() … 円
ellipse() … 楕円
polygon() … 多角形
クリッピング対象ボックスを指定するキーワード
margin-box … マージンボックス
border-box … ボーダーボックス
padding-box … パディングボックス
content-box … コンテントボックス
fill-box … オブジェクトバウンディングボックス。CSSでは border-box となる
stroke-box … ストロークバウンディングボックス。CSSでは border-box となる
view-box … 最も近いSVGビューポートボックス。CSSでは border-box となる

■初期値・適用対象・値の継承

初期値
none
適用対象
すべての要素。 SVGでは、defs要素とすべてのグラフィックス要素を除くコンテナ要素に適用される
値の継承
しない

■使用例

CSSソースは外部ファイル(sample.css)に記述

h5.m {
	margin-bottom: 0;
}

HTMLソース

<h5 class="m">clip-pathプロパティの指定なし</h5>
<div>
<img src="../images/kaeru.gif">
</div>

<h5 class="m">clip-path: inset(20px 30px);</h5>
<div>
<img src="../images/kaeru.gif" style="clip-path: inset(20px 30px);"></div>

<h5 class="m">clip-path: circle(60px at 100px 75px);</h5>
<div>
<img src="../images/kaeru.gif" style="clip-path: circle(60px at 100px 75px);">
</div>

<h5 class="m">clip-path: ellipse(100px 50px at 100px 75px);</h5>
<div>
<img src="../images/kaeru.gif" style="clip-path: ellipse(100px 50px at 100px 75px);">
</div>

<h5 class="m">clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);</h5>
<div>
<img src="../images/kaeru.gif" style="clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);">
</div>
↓↓↓

ブラウザ上の表示

clip-pathプロパティの指定なし
clip-path: inset(20px 30px);
clip-path: circle(60px at 100px 75px);
clip-path: ellipse(100px 50px at 100px 75px);
clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ