利用css写三角形,兼容IE7
.arrow-up { width:0px; height:0px; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid red; font-size:0px; line-height:0px; margin: 0 auto; } .arrow-down { width:0px; height:0px; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid blue; font-size:0px; line-height:0px; } .arrow-left { width:0px; height:0px; border-bottom:10px solid transparent; border-top:10px solid transparent; border-right:10px solid #DC143C; font-size:0px; line-height:0px; } .arrow-right { width:0px; height:0px; border-bottom:10px solid transparent; border-top:10px solid transparent; border-left:10px solid #FF00FF; font-size:0px; line-height:0px; }
效果如下: