CSS の clip-path プロパティを使って面白い画像を作成する

CSS でクリップを使用すると、ボックスのように見えるすべてのデザインから脱却できます。さまざまな基本形状や SVG を使用して、クリップパスを作成できます。表示したくない要素の部分を切り取ります。

Rachel Andrew

ウェブページ上の要素はすべて、長方形のボックス内で定義されます。ただし、すべてを箱のように見せる必要があるわけではありません。CSS の clip-path プロパティを使用して、画像やその他の要素の一部をクリップし、面白い効果を作成できます。

上記の例では、バルーン画像は正方形です（出典）。clip-path と基本シェイプ値 circle() を使用すると、風船の周囲の余分な空が切り取られ、ページに円形の画像が残ります。

画像はリンクであるため、clip-path プロパティに関する他の情報も確認できます。画像の非表示部分ではイベントが発生しないため、クリックできるのは画像の表示領域のみです。

クリッピングは、画像だけでなく、任意の HTML 要素に適用できます。clip-path の作成方法はいくつかあります。この投稿では、それらについて説明します。

ブラウザの互換性

以前のブラウザの場合は、ブラウザで clip-path プロパティを無視して、クリップされていない画像を表示するようにするなど、代替手段を用意できます。これが問題になる場合は、機能クエリで clip-path をテストし、サポートされていないブラウザ用に代替レイアウトを提供できます。

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

基本的なシェイプ

clip-path プロパティには複数の値を指定できます。最初の例で使用した値は circle() でした。これは、CSS シェイプ仕様で定義されている基本的なシェイプ値の 1 つです。つまり、領域をクリップし、shape-outside に同じ値を使用して、そのシェイプの周囲にテキストを折り返すことができます。

基本的なシェイプの完全なリストは次のとおりです。

• inset()
• circle()
• ellipse()
• polygon()

inset()

inset() 値は、要素の端からクリップ領域を挿入し、上端、右端、下端、左端の値を渡すことができます。border-radius を追加して、round キーワードを使用することで、クリップ領域の角を曲げることもできます。

この例では、2 つのボックスがあり、どちらもクラスが .box です。1 つ目のボックスはクリップされておらず、2 つ目のボックスは inset() 値を使用してクリップされています。

circle()

ご覧のとおり、circle() 値は円形の切り抜き領域を作成します。最初の値は長さまたはパーセンテージで、円の半径です。2 つ目のオプションの値を使用すると、円の中心を設定できます。以下の例では、キーワード値を使用して、切り抜かれた円を右上に設定しています。長さや割合を使用することもできます。

角が平らになっていることに注意してください。

これらの値はすべて、要素のマージン ボックスによってシェイプがクリップされることに注意してください。画像に円を作成して、その形状が画像の自然なサイズの外側に広がると、エッジが平らになります。

ellipse()

楕円は基本的に押しつぶされた円であるため、circle() と非常によく似ていますが、x の半径と y の半径に加えて、楕円の中心の値も受け取ります。

polygon()

polygon() 値を使用すると、各ポイントの座標を設定して、必要な数の点を定義することで、かなり複雑なシェイプを作成できます。

ポリゴンを作成して実現する方法を確認するには、clip-path ジェネレータである Clippy を確認し、コードをコピーしてご自身のプロジェクトに貼り付けます。

ボックス値の形状

CSS シェイプでは、ボックス値のシェイプも定義できます。これらは CSS ボックスモデル（キーワード値 content-box、border-box、padding-box、margin-box を持つコンテンツ ボックス、パディング ボックス、ボーダー ボックス、マージン ボックス）に関連しています。

これらの値は単独で使用することも、基本的なシェイプとともに使用して、シェイプで使用される参照ボックスを定義することもできます。たとえば、次のコードは、コンテンツの端にシェイプをクリップします。

.box {
  clip-path: content-box;
}

この例では、円が基準ボックスとして margin-box（デフォルト）ではなく content-box を使用します。

.box {
  clip-path: circle(45%) content-box;
}

現在、ブラウザでは clip-path プロパティにボックス値を使用することはできません。ただし、shape-outside ではサポートされています。

SVG 要素を使用する

基本的な形状では不可能な、切り抜き領域をより細かく制御するには、SVG clipPath 要素を使用します。次に、url() を clip-path の値として使用して、その ID を参照します。

切り抜かれた領域をアニメーション化する

CSS の遷移とアニメーションを clip-path に適用して、興味深い効果を作成できます。次の例では、半径値が異なる 2 つの円を切り替えることで、ホバー時に円をアニメーション化しています。

クリッピングでアニメーションを使用する方法は、工夫次第でさまざまです。CSS Tricks の clip-path によるアニメーションで、いくつかのアイデアを確認できます。

写真撮影: Matthew Henry（Burst）