rect() and xywh() | Frontend Practical Guide

Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.types.basic-shape.rect`	119	119	122	17.2	119	17.2
CSS タイプ
`xywh` xywh() は CSS の関数で、包含ブロックの左端 (x) と上端 (y) からの距離を指定し、矩形の幅 (w) と高さ (h) を指定して矩形を作成します。これは basic-shape データ型の基本シェイプ関数です。 xywh() 関数を offset-path のような CSS プロパティで使用し、要素が移動される矩形のパスを作成したり、clip-path でクリッピング領域の図形を定義したりすることができます。	119	119	122	17.2	119	17.2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

.crop {
  clip-path: rect(10px 200px 150px 20px);
}
.highlight {
  clip-path: xywh(20px 10px 180px 140px round 8px);
}

CSS Rect() clip demo.

CSS Xywh() clip demo.

CSS Xywh() + round demo.