このページは Cloud Translation API によって翻訳されました。

レスポンシブクリッピングに shape() を使用する
bookmark_border コレクションでコンテンツを整理必要に応じて、コンテンツの保存と分類を行います。

Noam Rosenthal

公開日: 2025 年 4 月 8 日

clip-path プロパティを使用すると、円、ポリゴン、SVG パスにクリップして要素の形状を変更できます。ただし、Chrome 135 と Safari 18.4 より前は、レスポンシブなポリゴンと、SVG パスを使用してレスポンシブではないより複雑なシェイプのどちらかを選択する必要がありました。新しい shape() 関数を使用すると、clip-path で要素をポリゴン以外のシェイプにクリップできます。このシェイプもレスポンシブです。

Browser Support

Source

旗の形状を作成する

たとえば、clip-path: path() と clip-path: shape() で旗の形状を作成する方法を比較します。

旗の形状は、上部と下部の境界が直線や丸い角ではなく 3 次ベジェ曲線であるため、正確にはポリゴンではありません。

`clip-path: path()` でフラグを作成する

この旗のような形状は、SVG パスを使用して表すことができます。

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

SVG パスは、一連のパスコマンドです。

0, 20 に移動します。
コントロールポイント（25,0 と 75, 40）を使用して、100, 20 にカーブします。
80 までの垂直線。
コントロールポイント（75,100、25,50）を使用して、0, 80 にカーブします。
パスを閉じます（0,20 までの線）。

旗の形状が描画されますが、すべての単位はピクセル単位です。SVG では、これらのピクセルをビューボックスにスケーリングできますが、常にシェイプ全体の幾何学的スケールのように見えるようにします。

たとえば、長方形全体を拡大縮小し、曲線の高さと幅を 20 ピクセルに維持したい場合、SVG では対応できません。

`shape()` でフラグを作成する

shape() を使用して同じ結果を比較します。シェイプ関数は、SVG パスコマンドと同様に一連のコマンドを受け入れます。ただし、これらのコマンドは、任意の CSS 単位で CSS の長さと割合を受け入れます。

次の CSS は、フラグ a shape() をパーセンテージ単位に変換します。

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

レスポンシブにする

使用可能な CSS 長の範囲は広く、各座標に使用する長さを選択できます。

たとえば、旗のサイズ全体を要素のサイズでスケーリングし、曲線の高さを一定にするには、次のようにします。

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

カスタムプロパティとアニメーションを追加する

シェイプが CSS で定義されたので、カスタムプロパティを使用して高さを簡単に操作することもできます。

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

@property 記述子を使用して CSS プロパティをアニメーション化し、範囲を超えないようにクランプすることもできます。

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

デモを試す

Chrome 135 または Safari 18.4 では、こちらの CodePen デモで、clip-path: shape() を使用して作成されたアニメーション化された旗の形状を確認できます。

概要

clip-path: shape() を使用すると、任意のレスポンシブなシェイプを使用して要素をクリップできます。これは、従来は円錐状のグラデーションや JavaScript で作成された SVG などの手法でのみ可能でした。

完全な構文については、仕様をご覧ください。

現在のところ、clip-path でのみ機能します。今後は、この種のシェイプを要素の境界の形状を設定するために使用することを想定しています。これにより、長方形以外の表現方法がさらに増えることになります。

レスポンシブ クリッピングに shape() を使用する bookmark_borderbookmark コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。