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

CSS でクリッピングを使用すると、デザイン内のあらゆるものがボックスのように見える必要がなくなります。さまざまな基本シェイプ（SVG）を使用して、クリップパスを作成できます。次に、表示したくない要素の部分を切り取ります。

Rachel Andrew

ウェブページ上の要素はすべて、長方形のボックス内で定義されます。ただし、だからといって、すべてを箱のように見せる必要はありません。CSS の clip-path プロパティを使用して、画像などの要素の一部を切り取って、おもしろい効果を作り出すことができます。

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

この画像はリンクであるため、clip-path プロパティについて別のことがわかります。クリックできるのは画像の表示領域のみです。画像の非表示部分ではイベントは発生しません。

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

ブラウザの互換性

対応ブラウザ

  • 55
  • 79
  • 3.5
  • 9.1

ソース

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

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

基本的な図形

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

基本的なシェイプの全一覧は次のとおりです。

inset()

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

この例では、クラスが .box のボックスが 2 つあります。最初のボックスにはクリッピングがなく、2 番目のボックスは inset() 値を使用してクリッピングされています。

circle()

ご覧のように、circle() 値により円形のクリップ領域が作成されます。1 つ目の値は長さまたは割合で、円の半径です。2 つ目の省略可能な値では、円の中心を設定できます。以下の例では、キーワード値を使用して、切り抜かれた円を右上に設定しています。 長さや割合を使用することもできます。

平らなエッジに注意してください。

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

角が平らで切り取られた円
先ほど使用した画像に circle(50%) が適用されています。画像は正方形ではないため、上下の余白ボックスに収まると円がクリップされます。

ellipse()

楕円は基本的には円の中に押し付けられた円であるため、circle() と非常によく似ていますが、x の半径と y の半径を指定でき、さらに楕円の中心の値も指定できます。

polygon()

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

ポリゴンを作成して可能な処理については、clip-path 生成ツールの Clippy をお試しください。コードをコピーして独自のプロジェクトに貼り付けます。

ボックスの値からのシェイプ

CSS Shapes では、ボックス値のシェイプも定義されています。これらは 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 要素を使用します。次に、clip-path の値として url() を使用して、その ID を参照します。

クリップ領域をアニメーション化する

CSS の遷移とアニメーションを clip-path に適用すると、面白い効果が得られます。次の例では、半径の値が異なる 2 つの円の間を遷移することで、カーソルを合わせたときに円をアニメーション化します。

クリップでアニメーションを活用するクリエイティブな方法はたくさんあります。 CSS Tricks で clip-path を使用してアニメーション化する方法の例をご覧ください。

撮影者: Matthew Henry（Burst）