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

2024年6月8日

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

ポイント

本記事では、

画像を丸や三角や台形、任意の形でくり抜く方法を解説します。

切っちゃいましょう！バシバシと。

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 画像を切り抜く方法
2 WordPress で使う場合
3 まとめ：画像を丸や三角や台形、任意の形でくり抜く方法

画像を切り抜く方法

Point.

画像を
切り抜く方法

画像を切り抜く場合は、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 ファイル（画像をベクトルで指定したもの）を利用して、切り抜く矩形を指定します。

方法は以下の通りです。

step
1svg ファイルを用意する

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

step
2svg ファイルを html で表記する

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 ）をつけます。

step
3CSS で矩形を指定する

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

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

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

step
4完成です

完成です。

WordPress で使う場合

Point.

WordPres で
使う場合

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

step
1画像にクラスをつける

画像に「追加 CSS クラス」で任意のクラス名（例：my-sample-cut）を指定する

step
2CSS を指定する際に img をつける

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

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

step
3完成です

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

WordPress のお役立ちテクニックはこちら

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

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

ポイント

正円でくり抜く場合は「clip-path: circle」を利用する
楕円でくり抜く場合は「clip-path: ellipse」を利用する
多角形で切り抜く場合は「clip-path: polygon」を利用する
任意の形で切り抜く場合は svg イメージを利用する

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

40代・50代「会社員におすすめ」の在宅でできる副業５選

: 40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

: 20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

: 【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る