对于我这种不折腾会死星人来说，一天不折腾，就闲得蛋疼。在新浪weibo看微博的时候，无疑中看到新浪顶部的导航里面的小三角，突然在想他是用图片呢，还是直接用css呢？习惯性的打开firebug，详细的看看。小三角的作用已经很明显了，告诉用户这个链接是个下拉的，是不一样的。
新浪微薄导航小三角的css实现
先看代码(只写核心的):
style:
span{display:inline-block;width:5px;height:3px;}
.b1{display:block;width:5px;height:1px;overfollow:hidden;background:#c1c1c1;}
.b2{display:block;width:5px;height:1px;overfollow:hidden;margin-left:1px;background:#c1c1c1;}
.b3{display:block;width:5px;height:1px;overfollow:hidden;margin-left:2px;background:#c1c1c1;}
html:
span
em class="b1" /em
em class="b2" /em
em class="b3" /em
/span
主题有猫病，pre标签里面的html代码竟然不见了啊，我草
好吧，三角就是由三个元素组成，宽度分别是5px,3px,1px，然后分别设置背景色，高度设置为1px，由于IE君元素的最小高度和字体大小关联，那么设置overfollow:hidden;来隐藏多余的高度，只保留1px的高度，另外两个元素的原理也是一样，只是宽度不一样，并且使用margin-left;1px;来让三个1px高度的元素组合起来，这样子看起来，就是个三角了。当然了，由于使用的em标签，就必须使用display:block;来设置高了。
google的实现
style:
.b{border-style:solid dashed dashed;border-color:transparent;border-top-color:sliver;display:inline-block;font-size:0;height:0;line-height:0;width:0;border-width:3px 3px 0}
html:
任一一个内联标签，比如b等
我刚看这段代码的时候，没太看懂，后来琢磨了下，才看明白，要明白这个三角的实现，首先得明白边框这玩意儿，先看看下面的内容：
有没有发现其中边框其实只取一个角的话，那么是不是就可以由左右两边组成一个小三角呢，这就是google小三角实现的原理。
空标签必须是inline-block或者block的，因为要设置大小，同时设置边框的形式，其实这儿solid dashed dashed，也就是说，除了上边的边框是实心的，其他都是虚线，而且对边框的颜色设置为对父级颜色北京透明，这个时候如果不设置颜色，边框其实看不到，然后对上边的边框设置为一种想要的颜色，那么除了上面的框是有颜色的，其他的都是透明的，那么就可以了，然后设置元素内容高和宽都是0，那么就剩下一个三角了，至于font-size:0;也是为了考虑IE君的心情啊。
其实对于google而言，使用更少的标签和css代码，到成的效果可以能更好，可想而知，哪种实现更好了，不过如果不是特别了解边框，相信很难想到google这种方式，不过我看了下国内前端比较厉害的淘宝，豆瓣等都是使用google这种形式。
综合看了下，还是google的实现的最好，豆瓣也很好。
css君，你又立功了。
