CSSだけで画像を丸く切り抜く、Photoshopなど使わずにね

ども、暑くても食欲が全く落ちず夏痩せが期待できない dice（@dice_dDtea）です。
今回のブログリニューアルでやったことを忘れないようにやり方を記しておこうかと思います。

今回はPhotoshopなどでレタッチして画像を丸く切り抜くんじゃなくCSSだけで完結してしまう方法です。
この方法だと、「気が変わった！丸から四角に戻そう！」「やっぱかど丸かな？」って時にイチイチ画像を弄るところまで戻らずに済むってとこですね。

この丸抜きは執筆者の前にあるアバターアイコンでやってます。

さ、早速やってきましょう！

Photoshop使わず CSS だけで画像を丸く切り取る方法

例としてこんな画像(umah.jpg)を

html <img>タグで配置します。

HTML
<img src="umah.jpg">

これだけでは指定しようがないんでクラス名を定義します。
サムネイル名なんで「thumb」としましょうか。

HTML
<img class="thumb" src="umah.jpg">

準備はできました。
CSSで丸抜きをします。

かど丸にする border-radius で 丸抜きができます

border-radiusを使います。
今回は直径 250px の円にしましょう。

CSS
.thumb {
	width: 250px;
	height: 250px;
	border-radius: 50px;
}

かど丸の半径を指定幅の半分以上(大きい分は問題なく円になります)指定すれば円になります。

例えば、
width: 40px; height: 40px; なら border-radius: 20px;
width: 512px; height: 512px; なら border-radius: 256px;

e.g.

サイズは全て 250 x 250px とします。

指定幅半分未満の場合

CSS
.thumb {
	width: 250px;
	height: 250px;
	border-radius: 50px;
}

たんなる かど丸四角形。

指定幅半分ジャストの場合

CSS
.thumb {
	width: 250px;
	height: 250px;
	border-radius: 125px;
}

円です。

指定幅半分以上の場合

CSS
.thumb {
	width: 250px;
	height: 250px;
	border-radius: 250px;
}

円ですね。大きさも変わらないようです。

応用して楕円にする

CSS
.thumb {
	width: 120px;
	height: 250px;
	border-radius: 60px / 125px;
}

楕円になったけど・・・。

ちなみに border-radius の「/(スラッシュ)」区切りは「水平方向」と「垂直方向」と分けた半径指定です。
詳しくは

border-radius－CSS3リファレンス

border-radiusプロパティは、ボックスの4つのコーナーの角丸をまとめて指定する際に使用します。それぞれの角丸コーナーは4分の1楕円になりますが、楕円の形状は、下図のように水平方向と垂直方向の2つの半径の組み合わせで決定されます。

htmq.com

Sassで指定する場合は

Sass
.thumb {
	$w: 250px;
	width: $w;
	height: $w;
	border-radius: ($w/2);
}

〆 まとめ

かど丸って言っても四隅全て丸になるような数値入力すれば正円にできるわけです。

全てCSSで何とかしたいコーダーに幸多かれ＼(^o^)／
それでは～