【CSSで実現】画像を丸や三角や台形、任意の形でくり抜く方法（SVG ファイルを使ったケースも合わせて解説）

画像を好きな形で切り抜きたい場合がありますよね。そういう形の画像を用意しても良いのですが、CSSで任意に切る撮ることができたら便利です。

画像を切り抜く方法

画像を切り抜く場合は、CSS の「clip-path」を使います。具体的に切り抜くパターンごとに見ていきましょう。

■ 丸く切り抜く

正円で切り抜いています。

clip-path: circle(180px at 200px 200px);

「clip-path」で circle を指定します。上記の例は半径 180px、中心位置 200px、200px で正円で切り抜いています。

■ 楕円に切り抜く

楕円で切り抜いています。

clip-path: ellipse(300px 180px at 300px 200px);

「clip-path」で ellipse を指定します。２つの半径（長径と短径）と位置を指定して楕円を定義します。

■ 三角形に切り抜く

三角形（山形）で切り抜いています。

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

「clip-path」で polygon を指定します。三角形や多角形を指定する場合は各矩形の頂点を順番に指定します。

（横＝ｘ、縦＝ｙ）で指定します。画像の左上が（ 0% 0% ）、画像の右上が（ 100% 0% ）、画像の右下が（ 100% 100% ）です。画像のど真ん中は（ 50% 50% ）ですね。

■ 台形（左側をカット）に切り抜く

台形（左側を斜めにカット）で切り抜いています。

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

「clip-path」で polygon を指定します。台形は頂点が４点ありますので、各頂点を指定しています。

■ 台形（下側を斜めにカット）に切り抜く

台形（下を斜めにカット）で切り抜いています。

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

「clip-path」で polygon を指定します。台形は頂点が４点ありますので、各頂点を指定しています。

■ ぐにょぐにょ（好きな形に）に切り抜く

ぐにょぐにょに切り抜いています。

具体的には、svg ファイル（画像をベクトルで指定したもの）を利用して、切り抜く矩形を指定します。

方法は以下の通りです。

[st-step step_no=”1″]svg ファイルを用意する[/st-step]

svg ファイル（画像）を用意します。

[st-step step_no=”2″]svg ファイルを html で表記する[/st-step]

svg ファイルは内部がテキストになっていますので、メモ帳などで開けます。開いてそのまま html で表記します。

<svg version="1.1" height="0" width="0">

<clipPath id="my-svg-1">

<path fill="#000000" d="M 134.175781 （途中省略...） 170.714844 "/>

</clipPath>

</svg>

そのまま書くと画面に svg ファイルを表示してしまうので、height=”0″ width=”0″ を指定して大きさのない画像にします。

path タグの前後を、clipPath で囲みます。この時に、任意の名前（ id ）をつけます。

[st-step step_no=”3″]CSS で 矩形を指定する[/st-step]

html で書いた svg ファイルの矩形を CSS で結び付けます。

 clip-path: url(#my-svg-1);

url を指定して、svg を記述した際につけた任意の名前に先頭に # をつけて指定します。

[st-step step_no=”4″]完成です[/st-step]

完成です。

WordPress で使う場合

WordPress で記事に貼った画像に使う場合はちょっとコツがあります。順に説明します。

[st-step step_no=”1″]画像にクラスをつける[/st-step]

[st-step step_no=”2″]CSS を指定する際に img をつける[/st-step]

WordPress の画像は、div タグで自動で囲まれ、その div タグのほうに、任意で付けたクラス名が付与されます。そのままクラス名を指定して切り抜くと、img ではなく div タグのほうを切り抜いてしまうため、明示的に img のほうに CSS を適用します。

<style>
.my-sample-cut img {
  clip-path: circle(180px at 200px 200px);
}
</style>

[st-step step_no=”3″]完成です[/st-step]

完成です。切り抜けました。

まとめ：画像を丸や三角や台形、任意の形でくり抜く方法

画像を任意の形で切り抜くには、CSS の clip-path を利用します。

ぐでんぐでんに切り抜いて、かっこいいホームページを演出してくださいね。