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() 値は円形の切り抜き領域を作成します。1 つ目の値は長さまたはパーセンテージで、円の半径です。 オプションの 2 つ目の値を使用すると、円の中心を設定できます。 以下の例では、キーワード値を使用して、切り抜かれた円の右上を設定しています。 長さや割合も使用できます。

平らな面に注意してください。

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

ellipse()

楕円は押しつぶされた円で これは circle() とよく似ていますが、x の半径と y の半径を受け入れます。 楕円の中心の値を足した値。

polygon()

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

ポリゴンの作成と使用方法については、Clippy をご覧ください。 clip-path ジェネレータ コードをコピーしてプロジェクトに貼り付けます。

ボックス値の形状

ボックス値のシェイプも 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 で、クリップパスを使ったアニメーション化のアイデアを参考にしてみましょう。

写真撮影: Matthew Henry（Burst）