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/

posted @ 2012-01-04 15:46  Gukw  阅读(938)  评论(3编辑  收藏  举报