ボックスの角の一箇所のみ色を変える【CSS】

CSSのネタは相当久しぶりなのですが、ボックスの角の一箇所だけを色を変えるというものです。特に、CSS3も使ってないので、どなたがこのやり方を公開しているかもしれませんが・・・。

デザインによったら、下記図のようにボックスの角の一箇所だけ色が違うというのがあるかもしれません。背景画像でやってしまうのも手なのですが、CSSでやれるならやってしまおうということで、実装してみました。

HTMLは下記のようなどこにもあるようなdiv要素です。

<div id="shape">
aaaa
</div>

CSS

その肝心のCSSが下記です。:after擬似要素を使って、borderの幅を使って三角形を作って、アレコレしています。三角形のサイズを変更したいときは、20pxのところを良しなに変更してください。

#shape {
	position: relative;
	width: 100px;
	height: 100px;
	background: #5dc;
}

#shape:after {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	border-left: 20px solid transparent;
	border-bottom: 20px solid #4ac; 
	content: "";
}

画像を使わずに実装するか

事の発端を言うと、新型iPad対策です。新型iPadでWebサイトを見られた人は多いと思いますが、あの解像度はヤバイですよね。そして、解像度の低い画像の見栄えの悪さといったら・・・ 画像を使ったほうが工数は短くなるところでも、CSSでやれるところはやっていこうという方針でなぜか進んでいます。