shapes
<basic-shape> は CSS のデータ型で、clip-path、shape-outside、offset-path の各プロパティで使用されるシェイプを表します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 37 | 79 | 54 | 10.1 | 37 | 10.3 | |
animation アニメーション | 37 | 79 | 54 | 10.1 | 37 | 10.3 |
| circle() は CSS の関数で、半径と位置を使用して円を定義します。これは basic-shape データ型の一つです。 | 37 | 79 | 54 | 10.1 | 37 | 10.3 |
| ellipse() は CSS の関数で、basic-shape データ型の一つです。 | 37 | 79 | 54 | 10.1 | 37 | 10.3 |
| inset() は CSS の関数は、参照ボックスの各辺から指定された内側への距離で矩形を定義します。これは、 basic-shape データ型の一つを定義するために使用される基本シェイプ関数です。 | 37 | 79 | 54 | 10.1 | 37 | 10.3 |
| polygon() は CSS の関数で、basic-shape データ型の一つです。多角形を描画するために使用します。 1 つ以上の座標のペアを指定し、それぞれが図形の頂点を表します。 | 37 | 79 | 54 | 10.1 | 37 | 10.3 |
基本構文
CSS
.circle {
clip-path: circle(50%);
}
.diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.rounded {
clip-path: inset(10% round 20px);
}ライブデモ
実務での使いどころ
-
画像の非矩形クリッピング
プロフィール画像を円形にクリッピングしたり、ヒーロー画像をダイヤモンド型に切り抜いたりします。
注意点
- clip-pathで切り抜かれた領域外はクリック不可となるため、インタラクティブ要素への適用には注意が必要です。
アクセシビリティ
- クリッピングによる装飾的な図形はテキスト情報を隠さないよう設計し、重要なコンテンツが切り取られないよう注意してください。