HTMLとCSSのみで三角形を作る

あるサイトを構築中に、デザインの都合上パンくずリストを使いたくなりました。
ですが、できれば画像ファイルは使いたくない。:hoverで色は変えたい。そしてやっぱりきれいにアロー型にしたい。
ということで、CSSで三角形を作ってみました。
これに:beforeやら:afterやらを組み合わせてやるとうまい具合にパンくず作れるはず！

サイズが縦横共に0なブロック要素に対してborderを設定すると、上下左右それぞれが三角形を構成してくれます。
ちょうど対角線を引いたときの感じで正方形を分割してくれるので、それぞれに好きな色をのせれば、三角形の完成！

<span style="display: inline-block; /* table-cell などでも可（インライン要素になればよい） */
border: .5em solid transparent;
border-left-color: #00f"></span>

２つつなげるとこんなこともできます。わざわざこんな変なことしなくてもグラデーションかけろよって話かもしれませんが（汗）

<span style="vertical-align: middle; position: absolute;">
    <span style="border: .25em solid transparent; display: inline-block; border-left: .5em solid #0f0; border-right: none; height: .5em; position: relative; top: 0;"></span>
    <span style="border: .25em solid transparent; display: inline-block; border-left: .5em solid #00f; position: relative; top: -.25em; left: -.25em;"></span>
</span>

これを書くとこうなります。