又遇到要做箭头了,这次不想用背景图了,所以参考腾讯微博的箭头实现方法做了一下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;100px;height:100px;border:1px solid #d2d2d2;position:relative;">
</div>