CSS3

プロパティ

clip-path

→●、mdn

図形の切り抜き。

基本図形を指定するか、または clipPath 要素を参照して、切り抜きパスを作成する。

<clip-source>

＝<url>

切り抜きパスを clipPath 要素への URL 参照として与える。

¶下の「テスト」を参照、詳細不明。

<basic-shape> || <geometry-box>

<basic-shape>

＝¶inset()
| circle()
| ellipse()
| polygon()
| path()

切り抜きパスを [CSS-SHAPES] に定義される基本図形関数として与える。基本図形をサイズして位置するために用立てる基準ボックスは、<geometry-box> が指定されて［いれば そのキーワードによる基準ボックス／いなければ border-box【に対する使用値の】キーワードによる基準ボックス］になる。

inset() ●

＝inset(<length-percentage>{1,4} [round <'border-radius'>]?)

内方へオフセットされた矩形を定義する。

• 1 ～ 4 個の <length-percentage> 引数は、［基準ボックスの各側からの inset（内方へのオフセット）］を時計回りに設定する。
• <'border-radius'> 引数（省略可能）は、border-radius 略式プロパティ構文を利用して、オフセットされた矩形の各隅の丸めを定義する。

いずれかの次元において、両側の inset の合計が基準ボックスの使用サイズを超える場合（左、右とも 75% など）、[CSS3BG] による § 曲線が重なり合う場合 と同じ規則を利用して、両側の比を保ちながら合計が 100% になるまで抑制する。これによる結果、図形の辺は，基準ボックスの中（inset が両側とも 75% の事例では、50% の所）に位置することになる。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:inset(5px);
">テスト</DIV>

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:inset(15px);
">テスト</DIV>

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:inset(5px round 20px);
">テスト</DIV>

circle()

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

真円を定義する。

• <shape-radius> 引数は、真円の半径を表現する。負な値は無効。百分率値は、基準ボックスの使用［横幅、縦幅］から、式［√(横幅の 2 乗 + 縦幅の 2 乗) ÷ √2］を基準に解決される。
• <position> 引数は、真円の中心を定義する。省略時の既定は center（基準ボックスの中心）になる。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:circle(50px);
">テスト</DIV>

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:circle(50px at left);
">テスト</DIV>

ellipse()

＝ellipse([ <shape-radius>{2} ]? [at <position>]?)

楕円を定義する。

• 2 個の <shape-radius> 引数は、順に、楕円の［x-軸、y-軸］半径を表現する。いずれも、負な値は無効。各引数に対する百分率値は、順に、基準ボックスの使用［横幅、縦幅］に対し解決される。
• <position> 引数は、楕円の中心を定義する。省略時の既定は center（基準ボックスの中心）になる。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:ellipse(40px 30px);
">テスト</DIV>

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:ellipse(40px 30px at left);
">テスト</DIV>

polygon()

＝polygon(<'fill-rule'>?, [<length-percentage> <length-percentage>]#)

多角形を定義する。

• <'fill-rule'> 引数は、多角形の内域を決定する規則に利用される ― 詳細は、SVG の fill-rule プロパティを見よ。可能な値は nonzero、evenodd であり、省略された場合、nonzero が既定の値になる。
• リスト内の各［<length-percentage> 引数ペア］は、多角形の各頂点を順々に与える［x、y］座標を表現し、¶コンマで区切る。

ユーザー エージェントは、このリストの最後の頂点から最初の頂点へ接続して多角形を閉じるものとする。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:polygon(0px 0px,30px 0px,30px 60px);
">テスト</DIV>

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:polygon(evenodd, 0px 30px, 90px 30px, 20px 70px, 50px 0px, 80px 70px);
">テスト</DIV>

path()

＝path([<'fill-rule'>,]? <string>)

パスによる図形を定義する。

• <'fill-rule'> 引数は、パスの内域を決定するために利用される ― 詳細は、SVG の fill-rule プロパティを見よ。可能な値は nonzero、evenodd であり、省略された場合、nonzero が既定の値になる。
• <string> は、SVG パス データ文字列を表現する。パス データ文字列が SVG 1.1 の文法と構文解析規則【参照】に［適合しない／適合するが空なパスを定義する］場合、path() 全体が無効になる。初期位置は、パス文字列内の最初の 移動する 命令（ "m" ／ "M" ）にて定義され、初期方向は SVG 1.1 に従う【“初期方向”は何のための記述？】。

ユーザー エージェントは、閉じたループを要求するプロパティ（shape-outside や clip-path など）において、文字列内にパスを閉じる 命令（"z"／"Z"）が無い場合には、暗黙的なそれでパスを閉じるものとする。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:path('M 0 200 L 0, 75 A 5, 5 0,0, 1 150, 75 L 200 200 z');
">テスト</DIV>

¶path()詳細不明

<geometry-box>

＝¶content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

指定されたキーワードによる基準ボックスは：

• <basic-shape> と併せて指定された場合には、<basic-shape> 用の基準ボックスを供する。
• 単独で指定された場合には、そのボックスを成す辺が切り抜きパスとして利用される ― 隅の形状付け（例： border-radius [CSS3BG] により定義されるものなど）があれば、それらも含めて。ボックス値による図形 [CSS-SHAPES] も見よ。

<geometry-box> 値に対する使用値は：

• CSS レイアウト ボックスが結び付けられていない SVG 要素においては：
  ［content-box／padding-box］に対しては fill-box になり、［border-box／margin-box］に対しては stroke-box になる。
• CSS レイアウト ボックスが結び付けられている要素においては：
  fill-box に対しては content-box になり、［stroke-box／view-box］対しては border-box になる。

content-box

要素の内容ボックス。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:content-box;
">テスト</DIV>

¶

padding-box

要素のパディングボックス。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:padding-box;
">テスト</DIV>

¶

border-box

要素のボーダーボックス。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:border-box;
">テスト</DIV>

¶

margin-box

要素のマージンボックス。

【この値は mask-clip、mask-origin には許容されない（課題 #5）。】

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:margin-box;
">テスト</DIV>

¶

fill-box

要素のオブジェクト限界ボックス。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:fill-box;
">テスト</DIV>

¶

stroke-box

要素の stroke 限界ボックス。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:stroke-box;
">テスト</DIV>

¶

view-box

要素に最も近い SVG 表示域が成すボックス ― SVG 表示域を作成している要素用に viewBox 属性が指定されているならば：

• ボックスの位置は、viewBox 属性により確立される座標系の原点になる。
• ボックスの寸法は、viewBox 属性が与える横幅、縦幅（ <width>、<height> ）値で与えられる。

【viewBox が指定されていない場合にどうなるかは、述べられていない。】

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:view-box;
">テスト</DIV>

¶

<shape-radius>

＝<length-percentage> | closest-side | farthest-side

真円／楕円 用の半径を定義する。省略時の既定の値は、closest-side。

<length-percentage> ○

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:circle(50px);
">テスト</DIV>

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:circle(50%);
">テスト</DIV>

closest-side

図形の中心から 基準ボックスの最も近い側までの長さを利用する。真円用には、両次元にて最も近い側になる。楕円用には、各半径に対し，当の次元にて最も近い側になる。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:circle(closest-side);
">テスト</DIV>

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:ellipse(closest-side closest-side);
">テスト</DIV>

farthest-side

図形の中心から 基準ボックスの最も遠い側までの長さを利用する。真円用には、両次元にて最も遠い側になる。楕円用には、各半径に対し、当の次元にて最も遠い側になる。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:circle(farthest-side);
">テスト</DIV>

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:ellipse(farthest-side farthest-side);
">テスト</DIV>

¶特に意味は無い？

none

切り抜きパスは作成されない。

<DIV style="border:10px dotted green; width:100px; height:50px;
 padding:10px;
 background-image:url(Com/Picture.jpg);
 clip-path:none;
">テスト</DIV>

算出値が none 以外になる場合 ― opacity プロパティの値が 1 未満のときと同じ仕方で ― 積層文脈を作成させる。

URI 参照が妥当でない場合（例： 存在しないオブジェクトを指している／オブジェクトは clipPath 要素でない）、適用され切り抜きは無い。

clip-path: polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px,
        122px 57px, 184px 73px, 198px 105px, 199px 150px,
        145px 159px, 155px 139px, 126px 120px, 112px 138px,
        80px 128px, 39px 126px, 24px 104px);

clip-path: url("#clip1");

<clipPath id="clip1">
    <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105
        199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"/>
</clipPath>

テスト