clip-pathプロパティ

clip-pathプロパティを使用すると、内部のコンテンツは表示され、外部のコンテンツは非表示になるクリッピング領域を作成します。Chrome 119からclip-pathに <geometry-box> の値を指定できるようになります。
<geometry-box> の値を指定することで、任意の参照ボックスを指定することができます。

以下の例はclip-pathで円を作成しています。clip-pathを適用すると、表示されるエリアはブルーの円だけです。円の外側は表示されません。

.card {
  background-color: #77cce9; // ブルーの背景
  clip-path: circle(80px at 50% 50%);
}

値

以下の値を1つ、または、組み合わせて指定。

  • none
    クリッピングパスは生成されない（初期値）
  • URL
    クリッピングパスとなる要素をURLで指定
  • クリッピング形状を指定する関数
    • inset() … 内側へのオフセット（通常は長方形となる）
    • circle() … 円
    • ellipse() … 楕円
    • polygon() … 多角形
  • クリッピング対象ボックスを指定するキーワード（geometry-box）
    • margin-box … マージンボックス
    • border-box … ボーダーボックス
    • padding-box … パディングボックス
    • content-box … コンテントボックス
    • fill-box … オブジェクトバウンディングボックス。CSSでは border-box となる
    • stroke-box … ストロークバウンディングボックス。CSSでは border-box となる
    • view-box … 最も近いSVGビューポートボックス。CSSでは border-box となる

初期値・適用対象・値の継承

  • 初期値
    none
  • 適用対象
    すべての要素。 SVGでは、defs要素とすべてのグラフィックス要素を除くコンテナ要素に適用される
  • 値の継承
    しない

「xywh()」と「rect()」値

Chrome 119より、clip-pathプロパティでxywh()値とrect()値がサポートされました。これにより、長方形や角丸長方形のクリップを簡単に設定できるようになります。

xywh()

xywh()は、要素を角丸長方形に切り抜くためのものです。
以下のように指定することで、長方形に切り抜くことができます。

/* xywh(x座標 y座標 幅 高さ round 角丸) */
.sample {
    clip-path: xywh(10px 10px 100px 100px round 10px);
}
inserted by FC2 system