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

rect() and xywh()

rect()は要素の端からのインセットで矩形を定義し、xywh()はx/y座標と幅/高さで矩形を定義するCSS関数です。clip-pathやshape-outsideで使用でき、inset()関数よりも直感的に矩形のクリッピング領域を指定できます。画像のトリミングやUI要素の可視領域の制御に適しており、角丸の指定もサポートしています。

シェイプクリッピング

概要

rect()は要素の端からのインセットで矩形を定義し、xywh()はx/y座標と幅/高さで矩形を定義するCSS関数です。clip-pathやshape-outsideで使用でき、inset()関数よりも直感的に矩形のクリッピング領域を指定できます。画像のトリミングやUI要素の可視領域の制御に適しており、角丸の指定もサポートしています。

対応ブラウザ

デスクトップ

Chrome 119+
Edge 119+
Safari 17.2+
Firefox 122+

モバイル

Chrome Android 119+
Safari iOS 17.2+
Firefox Android 122+

基本構文

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

実務での使いどころ

  • 画像の矩形トリミング

    rect()やxywh()を使って画像の特定の領域だけを表示し、CSSのみでトリミング効果を実現します。

注意点

  • rect()はinset()と異なりエッジからの絶対値で指定するため、レスポンシブデザインでは%値の使用を検討してください。

アクセシビリティ

  • クリッピングで隠されたコンテンツがスクリーンリーダーで読み上げられる場合があるため、意図しない情報の露出に注意してください。

参考リンク