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啦！
<style type="text/css">#bottom{
width:0px
height:0px
border-left:30px solid #FFFFFF
border-top:30px #FF6699 solid
border-right:30px solid #FFFFFF
}
#top{
width:0px
height:0px
border-left:30px solid #FFFFFF
border-bottom:30px #FF6699 solid
border-right:30px solid #FFFFFF
}
#rt{
width:0px
height:0px
border-left:30px solid #FFffff
border-bottom:30px #ff6699 solid
}
#lt{
width:0px
height:0px
border-right:30px #FFffff solid
border-bottom:30px solid #FF0000
}
</style>
下
<div id="bottom"></div>
上
<div id="top"></div>
右下
<div id="rt"></div>
左下
<div id="lt"></div>
select{width: 90%
padding: 8px 0
font-size: 14px
border: none
outline: none
appearance: none
-webkit-appearance: none
-moz-appearance: none
}
div:after{
content: ""
width: 13px
height: 7px
background: url(../../../images/about/sanjiaoxing2.png) no-repeat center
-webkit-background-size: 100% 100%
background-size: 100% 100%
position: absolute
right: 20px
top: 45%
//给自定义的图标实现点击下来功能
pointer-events: none
}
