CSS制作三角形等指示标

利用css的背景叠加

三角形的down

三角形的up

*{

margin:0;

padding:0;

}

ul{

width:600px;

border:1px solid#ddd;

height:40px;

position:relative;

}

ul:before,ul:after{

position:absolute;

content:' ';

display:block;

width:0;

height:0;

left:100%;

top:50%;

}

ul:before{

border:10px solid;

border-color:transparent transparent transparent#ddd;

}

ul:after{

border:10px solid;

border-color:transparent transparent transparent#FFF;

margin-left: -2px;

}

li{

width:180px;

line-height:28px;

border-bottom:1px solid#DDD;

float:left;

text-align:center;

position:relative;

}

ul li:before, ul li:after{

position:absolute;

content:' ';

display:block;

width:0;

height:0;

top:100%;

left:50%;

/* margin-left: -10px;*/

}

ul li:first-child:before{

border:10px solid;

border-color:#dddtransparent transparent;

}

ul li:first-child:after{

border:10px solid;

border-color:#ffftransparent transparent;

margin-top: -2px;

}