<shape>

<shape> CSS データ型は、ある領域の具体的な形状を表します。この領域は、要素のどの部分で clip のようなプロパティが用いられるのか、定義するのに使われます。

Note: <shape> and rect() は廃止されたclipと連動しますが、 clip-pathが支持されました 可能であれば、代わりにclip-path<basic-shape>データ型を使用してください。

構文

rect() 関数記法は、矩形の領域を作ります。

rect() 関数

rect(top, right, bottom, left)

引数は次の長さを表します:

top
要素のボックスのボーダーの top と、矩形の top との差を表す <length>
right
要素のボックスのボーダーの left と、矩形の right との差を表す <length>
bottom
要素のボックスのボーダーの top と、矩形の bottom との差を表す <length>
left
要素のボックスのボーダーの left と、矩形の left との差を表す <length>

補間

矩形の <shape> CSS データ型の値は、アニメーション用に補間可能です。toprightbottomleft のそれぞれが実数(浮動小数点数)として扱われ、補間されます。補間速度は、アニメーションに結びつけられた timing function で決められます。

img.clip04 {
  clip: rect(10px, 20px, 20px, 10px);
}

仕様書

仕様書 策定状況 コメント
CSS Level 2 (Revision 1)
<shape> の定義
勧告 clip プロパティと同時に定義

ブラウザ実装状況

BCD tables only load in the browser

関連情報