【CSS】画像を円とか三角とか好きな形に切り抜くテクまとめ【clip-path】

CSSで画像を切り抜きしたいとき、スゴク便利なのがあります。

それが clip-path  というプロパティ

僕は今まで知らなかったんですが、使ってみたら超便利でした。

ただ使い方を思い出すのは大変なので、
ここでは clip-path で画像を好きな形に切り抜くコード例とかを紹介します

そもそも clip-path って何?

まず clip-path  とは何なのかについて、少しだけ説明

これは名前の通り、パスで画像を切り抜き(クリップ)できるプロパティ

▼ 以下リファレンスでの説明引用

CSS の clip-path プロパティは、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

引用元 : https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

ある形を作ったら、その内側で切り抜くっていう感じのやつ

 

本当に形さえ定義できれば、画像でもなんでも切り抜けて便利です。

  • 丸形に画像を切り抜いたり、
  • 星形に画像を切り抜いたり、
  • 三角形に画像を切り抜いたり、
  • 自分で形を定義して切り抜いたり、、、

最後の「形を定義」というのは、SVGで clipPath  要素を作るということ

SVGで定義するから、どんな形にも定義できるという訳です。

まずは基本的な形に切り抜く方法

では clip-path  で画像を切り抜く方法について詳解

そもそも clip-path  では、次の4つの形が初めからサポートされてます。

  • 円形(circle)
  • 楕円形(ellipse)
  • 多角形(polygon)
  • はめ込み形(inset)

それぞれを使い、画像を切り抜くCSS例は次の通り

1.画像を丸形(circle)で切り抜くコード例

まず次みたいに img 要素を作成( class="clip circle"  が重要)

そしたら、次のCSSコードをこの画像に適用

このCSS例のように、 circle  関数に対して半径と中心座標を渡すだけです。

 

実際の切り抜かれ方はこういう感じになりました。

clip-pathを使って円形に切り抜かれた画像の例

▲ 丸形に切り抜かれたクマちゃん

具体例は思いつかないけど、なんか汎用的に使えそうです。

2.画像を楕円形に切り抜くコード例

これも円形に切り抜く方法と大体おなじ

ただし circle  関数の代わりに ellipse  関数を使う必要があります。

 

まず次のような img 要素を作成( class="clip ellipse"  がポイント)

あとは次のCSSを画像要素に適用

ほとんど circle  と同じですが、
円の直径の長い方(長径)と短いほう(短径)の2つを指定する のがポイントですね。

 

実際に切り抜きされた画像はこんな感じ

clip-pathを使って楕円形(ellipse)に切り抜いた画像の例

▲ 長径300px、短径220pxで切り抜かれたクマちゃん

これも丸形ほどでないけど、いろいろ用途がありそう

3.画像を三角に切り抜くコード例

お次は三角形みたいに多角形で切り抜く方法について

これには clip-path  に対して polygon  関数を使えば切り抜きできます。

 

まず次のような img 要素を作成( class="clip triangle"  が大事なとこ )

そうしたら、この画像要素に次のCSSを適用

この例みたいに、点をプロットしていくようなイメージ ですね。

ここではパーセント指定ですが、もちろんピクセルでも多角形が作れます。

clip-path で画像を好きな形に切り抜くには

ここからが本題

次は自分でシェープを定義して、その形で切り抜く方法についてです。

その手順を箇条書きすると・・・

  • SVG 内で clipPath  要素を定義
  • その clipPath  要素にIDを割り振り
  • そのID を clip-path: url(#hoge)  みたいに指定

こういう感じでできます。

具体的なコード例は次の通り

 

まず好きな形をSVGとして作成しましょう。

アドビとか使うのも面倒なので、次の Figma というツールを使うのが簡単です。

アカウント登録して、切り抜きしたい形を円とか三角とか組み合わせて作ってください。

 

そうしたら作成した図形を全選択

▼ Ctrl + A かドラッグして選択すればOk

Figmaで好きな形を作ったら、全選択する

こういう風に、図形が1つに連結されます。

 

あとは Figma の上メニューから【Union Selection】をクリック

Figmaで図形を全選択したら、上メニューから「Union Selection」をクリック

この処理を行うと、図形が1つのパスとして連結できます。

あとはメニューから【File】=>【Copy as】=>【Copy as SVG】を選択

図形のSVGがクリップボードにコピーされます。

 

そのあと、コピーしたSVGをエディタとかに貼り付け

▼ 試しに作ってみたSVG例

このSVGを切り抜き用に加工し、HTML内に埋め込みします。

▼ この例だと次みたいに加工する

ハイライトした2行目と4行目に注目!

大事なのは path  要素を clipPath  で囲み、その clipPath  要素にIDを付けること

今回だと分かりやすく myClip  というID名を付けときます。

 

そしたら次みたいな切り抜きしたい img 要素を作成

クラス名は何でもいいんですが、仮として clip any  としておきます。

 

あとは次のCSSをこのimg要素に対して適用するだけ

切り抜きSVGを作るのは面倒だけど、最後のCSS部分はめちゃくちゃ簡単です。

 

実際に切り抜きしてみた画像はこんな感じ

clip-pathで自分で定義した形で切り抜きをした画像の例

▲ なんか良く分からない形に切り抜かれたクマちゃん

今回は正方形を3つ組み合わせただけだけど、デザインに精通してる人ならさらに複雑で、もっとカッコいい形で切る抜くこともできます。そこは各人のセンス次第!

ちなみに画像で切り抜ける mask-image というのもある

今紹介したのとは別に、 mask-image というのもあります。

この mask-image は画像を画像でマスキングできるプロパティ

詳しくは次記事で解説したのでチェック

このプロパティも画像を切り抜きたいときに結構役立つはず

切り抜き方とか注意点も紹介したので、良ければご覧ください。

画像の切り抜きコード例のまとめ

ここまでで紹介したコード例は次の4つ

なんか地味に便利そうなので、どこかで活用していきたいです。

以上、CSSの clip-path で画像を色々な形で切り抜く方法でした。ではまた(^_^)/~

CSS

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください