详情小三角css,CSS实现小三角

CSS实现小三角三角的颜色可以根据需要设置，白色的三角只需要把

border-left、border-right设置为transparent，然后border-bottom设置为#fff就可以了

更加详细的三角形设置

/*css style */  #up {

width:0px;

height:0px;

border-bottom:10px solid  #89b007;

border-left:10px solid #fff;

border-right:10px solid #fff;

}

#down {

width:0px;

height:0px;

border-top:10px solid  #89b007;

border-left:10px solid #fff;

border-right:10px solid #fff;

}

#left {

width:0px;

height:0px;

line-height:0px;             /*解决ie出现梯形问题*/

border-right:10px solid  #89b007;

border-top:10px solid #fff;

border-bottom:10px solid #fff;

}

#right {

width:0px;

height:0px;

line-height:0px;             /*解决ie出现梯形问题*/

border-left:10px solid  #89b007;

border-top:10px solid #fff;

border-bottom:10px solid #fff;

}

#trapezoid {

width:7px;

height:15px;

border-bottom:10px solid  #89b007;

border-left:10px solid #fff;

border-right:10px solid #fff;

}

HTML代码