利用css的背景叠加
*{
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;
}
