CSSで画像を丸く切り抜く方法を備忘録としてご紹介します。
企業サイトのトップページや、ECサイトの商品一覧などで、3～4つほどの横並びコンテンツがあり、そこに丸いサムネイル画像を置いているのをために見かけます。
画像は四角でも全然構わないのですが丸くしてちょっとだけ目を引く形にしてやろうと言うのが、今回の目的です。
なお、画像を作るのが面倒なのではなく、画像を差し替えれば自動的に丸くなってくれるというのを目指し、CSSで円形に切り抜いてみたいと思います。
CSSで画像を円形に切り抜く方法
|
1 |
<div class="maru-box"><img src="./img url" alt="maru" width="300" /></div> |
丸く切り抜く（デモ1）
|
1 |
<div class="maru-box2"><img src="./img url" alt="maru" width="300" /></div> |
|
1 2 3 |
.maru-box img { border-radius: 300px; } |
角丸にする（デモ2）
|
1 |
<div class="maru-box2"><img src="./img url" alt="maru" width="300" /></div> |
|
1 |
<div>.maru-box2 img { border-radius: 20px; }</div> |
枠線を付けてみる（デモ3）
|
1 |
<div class="maru-box3"><img src="./img url" alt="maru" width="300" /></div> |
|
1 |
<div>.maru-box3 img { border-radius: 50%; border: 4px solid GREEN; }</div> |
２重枠線を付けてみる（デモ4）
|
1 |
<div class="maru-box4"><img src="img url" alt="maru" width="300" /></div> |
|
1 |
<div>.maru-box4 img { border-radius: 50%; border: 10px double #8b0000; }</div> |
