HTML,CSS

【CSS】画像を円形に切り抜く方法

2019/12/16

CSSで画像を丸く切り抜く方法を備忘録としてポストします。

企業サイトのトップページや、ECサイトの商品一覧などで、3~4つほどの横並びコンテンツがあり、そこに丸いサムネイル画像を置いているのをために見かけます。

その画像、四角でも全然構わないのですが、丸くしてちょっとだけ目を引く形にしてやろうと言うのが、今回の目的。

なお、画像を作るのが面倒、、、なのではなく、画像を差し替えれば自動的に丸くなってくれるというのを目指し、CSSで円形に切り抜いてみたいと思います。

CSSで画像を丸くする方法

こちらの画像を基本形とします。
ぱくたそさんで見つけたケーキの画像。

demo0

丸く切り抜く(デモ1)

先ほどの画像を丸く切り抜きたいと思います。
「border-radius」プロパティを利用します。

ベンダープレフィックは不要とのことなので、これでOKです。

結果。

demo1

設定する値は「px」「パーセンテージ」を指定することが出来ます。
今回の場合、300px の画像に対し 150px の円形としているので、

と書き換えることも可能です。

角丸にする(デモ2)

結果。

demo2

枠線を付けてみる(デモ3)

結果。

demo3

2重枠線を付けてみる(デモ4)

結果。

demo4

デモはこちら

参考サイト

-HTML,CSS
-, , ,