<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 プロパティと同時に定義

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
<shape>
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5.5Opera 完全対応 9.5Safari 完全対応 1.3WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
rect()
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5.5
補足
完全対応 5.5
補足
補足 For Internet Explorer versions 5.5 through 7, the rect() function uses spaces (instead of commas) to separate parameters. For Internet Explorer 8 and later versions, only the standard comma-separated syntax is supported.
Opera 完全対応 9.5Safari 完全対応 1.3WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報