SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

問題

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

答え

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

デモ

ほら。

仕組み

境界線(ボーダー)を利用する。

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

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

 

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

関連するメモ

コメント