HTML代码：
[html] view plain copy
<div class="sanjiao"></div>
CSS代码：
[css] view plain copy
.sanjiao {
width: 0
height: 0
overflow: hidden
border-width: 10px
border-color: transparent transparent #000 transparent
border-style: dotted dotted solid dotted
}
其原理就是给元素加一个比较大的边框，箭头的方向就是border-color四个参数的方向（上、右、下、左），箭头指向那一边就给哪一边设置颜色，其他边透明。
这样就很方便的做了一个小的三角形图标。
其中需要注意的地方是：由于IE6不支持overflow属性，会将其他边框也显示出来，所以将不需要显示的边框的border-style属性设置为dotted就可以完美兼容IE6啦！
使用CSS制作小三角形实际就是通过控制块元素的边框来实现的。
例如：
<style>
.triangle-up {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red
}
.triangle-down {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid red
}
.triangle-left {
width: 0
height: 0
border-top: 50px solid transparent
border-right: 100px solid red
border-bottom: 50px solid transparent
}
.triangle-right {
width: 0
height: 0
border-top: 50px solid transparent
border-left: 100px solid red
border-bottom: 50px solid transparent
}
</style>
<div class='triangle-down'></div> <!--向下三角形-->
<div class='triangle-up'></div> <!--向上三角形-->
<div class='triangle-left'></div> <!--向左三角形-->
<div class='triangle-right'></div> <!--向右三角形-->
原理就是设置块元素的三条边透明掉（tranparent）
