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

方法は以下の通りです。

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 で使う場合

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

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

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 を利用します。

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

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

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局

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

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情報局

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

【2025年チャンス】地方で副業のおすすめ。在宅、快適、移住先、ノマドを紹介 | ドンドン！副業情報局

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

WordPress の情報、テクニック一覧はこちらをクリック！

Presented By Boon Boon Blog .Com

電気通信事業法改正に伴う表記