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

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

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

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

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

このページの目次

そもそも clip-path って何？
まずは基本的な形に切り抜く方法
clip-path で画像を好きな形に切り抜くには
ちなみに画像で切り抜ける mask-image というのもある
画像の切り抜きコード例のまとめ

そもそも clip-path って何？

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

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

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

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

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

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

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

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

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

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

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

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

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

円形（circle）
楕円形（ellipse）
多角形（polygon）
はめ込み形（inset）

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

１．画像を丸形（circle）で切り抜くコード例

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

<img class="clip circle" src="kuma.jpg" />

1	<img class="clip circle" src="kuma.jpg" />

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

/** 
 * 円形に切り抜く 
 * 以下は中心(320,240)を中心に半径220pxで切り抜いているコード例
 **/
.clip.circle{
  clip-path: circle(220px at 320px 240px);
}

/**

* 円形に切り抜く

* 以下は中心(320,240)を中心に半径220pxで切り抜いているコード例

**/

.clip.circle{

clip-path: circle(220px at 320px 240px);

}

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

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

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

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

２．画像を楕円形に切り抜くコード例

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

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

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

<img class="clip ellipse" src="kuma.jpg" />

1	<img class="clip ellipse" src="kuma.jpg" />

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

/**
 * 楕円形に切り抜く
 * 以下は中心(320x240)を中心に、長径300px短径220pxで切り抜いているコード例
 **/
.clip.ellipse{
  clip-path: ellipse(300px 220px at 320px 240px)
}

/**

* 楕円形に切り抜く

* 以下は中心(320x240)を中心に、長径300px短径220pxで切り抜いているコード例

**/

.clip.ellipse{

clip-path: ellipse(300px 220px at 320px 240px)

}

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

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

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

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

３．画像を三角に切り抜くコード例

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

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

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

<img class="clip triangle" src="kuma.jpg" />

1	<img class="clip triangle" src="kuma.jpg" />

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

/**
 * 多角形に切り抜く
 * 以下は三角形に切り抜いているコード例
 **/
.clip.triangle{
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/**

* 多角形に切り抜く

* 以下は三角形に切り抜いているコード例

**/

.clip.triangle{

clip-path: polygon(50% 0, 0 100%, 100% 100%);

}

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

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

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

ここからが本題

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

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

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

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

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

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

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

Figma

Figma

https://www.figma.com/files/recent

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

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

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

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

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

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

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

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

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

▼ 試しに作ってみたSVG例

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="200" fill="#E5E5E5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H100V50H150V100H200V200H100V150H50V100H0V0Z" fill="#C4C4C4"/>
</svg>

</svg>

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

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

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="200" fill="#E5E5E5"/>
<clipPath id="myClip" transform="scale(2) translate(70, 20)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H100V50H150V100H200V200H100V150H50V100H0V0Z" fill="#C4C4C4"/>
</clipPath>
</svg>

</clipPath>

</svg>

ハイライトした２行目と４行目に注目！

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

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

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

<img class="clip any" src="kuma.jpg" />

1	<img class="clip any" src="kuma.jpg" />

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

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

/**
 * 画像を自由な形に切り抜くコード例
 **/
.clip.any{
  clip-path: url(#myClip)
}

/**

* 画像を自由な形に切り抜くコード例

**/

.clip.any{

clip-path: url(#myClip)

}

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

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

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

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

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

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

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

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

PisukeCode - Web開発まとめ

【CSS】画像を別画像でマスキングする方法＆コード例

https://pisuke-code.com/css-basic-usage-of-mask-image

画像を別画像でマスキングしたいことってないですか？例えばいくつか例を挙げるなら、画像を黄色の星形に切り抜きしたい画像をヒョウ柄のハートマークで切り抜きたい画像を水玉模様に重ねて切り抜きたい・・・みたいな感じで実はこれ、CSSの mask-image を使えば超簡単にできます。ただし、画像で画像を切り抜くわけなので、少し工夫が必要でした。ということで、そこらへんの注意点も含め、CSSの mask-image プロパティで画像をマスキングする手順を紹介します。画像マスキングするには mask-image プロパティを使う画像のマ...

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

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

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

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

円形に切り抜くコード例
楕円形に切り抜くコード例
多角形に切り抜くコード例
好きな形に切り抜くコード例

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

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