CSSだけで三角形を描画！

Image-free CSS Tooltip Pointers - A Use for Polygonal CSS? | Filament Group, Inc. （別窓）

CSSだけで描画した三角形を利用したツールチップです。

もしかしたらポピュラーなテクニックかもしれませんが、自分は知らなかったので紹介。
具体的な実装方法は以下の通り。

div.hoge {
width:0;
height:0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 30px solid red;
border-bottom: 0;
}

あとは<div class="hoge" />のように書けば出来上がりです。
いずれか一つのborderの値を0に保ちつつ、他の値を変えてみると様々な三角形を作ることができます。
空の要素を入れないといけないのが難点ではありますね。

以下のページには同じ手法で様々な図形が描画されていますので、あわせてどうぞ。
A Study of Regular Polygons （別窓）