【CSS】スタイルシートで三角形が描ける

Tweet

Category css 2012/04/20

問題

三角形って、スタイルシートで描けないよね？　画像いるよね？

答え

普通の三角形なら描ける（こういうの▲）。

デモ

ほら。

仕組み

境界線（ボーダー）を利用する。

50px * 50px のボックスの周りにいろんな幅のボーダーを指定すると以下のようになる。

中央のボックスの大きさを変更したり、0px * 0px にしたり、必要な辺だけ色をつけて、不要な辺は透明（transparent）にすると、ただのボーダーだけで、上下左右の向きの三角形、台形を描くことができる。

自由な大きさ、角度の三角形を描きたいけど、画像は使いたくない、画像にしてしまうと色が固定されて困るといった場合、結構使えそうです。