Diamond arrow (eliminating images on webpages)

Below is code to my diamond hack this is for those little arrows that appear in list navigations and such. I hate creating these images, so here I am using pure css along with the diamond HTML entity to create the arrow. I did a quick google search for this and nothing came up so I’m not too sure if this is in wide use today.

    <style>

    .diamond{height:12px;font-size:24px;color:#000;overflow:hidden;font-style:sans-serif;}
    .diamond .entity.up{margin-top:0px}
    .diamond .entity.down{margin-top:-12px}
    </style>

    <div class="diamond"><div class="entity down">&diams;</div></div><!--end .diamond-->