css实现箭头

又遇到要做箭头了，这次不想用背景图了，所以参考腾讯微博的箭头实现方法做了一下css。

实现效果：

代码：

.ARROW{z-index:1;width:16px;height:8px;position:relative;left:50%;top:0;margin-left:-8px;margin-bottom:-1px;overflow:hidden;}
.ARROW .upb{color:#D2D2D2;position:absolute;left:0;top:0;margin-top:0px;font-size:16px;font-family:Simsun;font-weight:normal;}
.ARROW .up{color:#fff;position:absolute;left:0;top:0;margin-top:1px;font-size:16px;font-family:Simsun;font-weight:normal;}

<div class="ARROW"><span class="upb">◆</span><span class="up">◆</span></div>
<div style="background:#fff;width:100px;height:100px;border:1px solid #d2d2d2;position:relative;">
</div>

示例：http://jsfiddle.net/esXWs/5/