Article Introduction: compatible with multiple-browser breadcrumbs. |
Breadcrumbs are a common component of the Web, earlier in the "CSS3 production breadcrumbs" and case "css3 bread crumbs Design " using CSS3 made a variety of bread crumbs effect, Today, using the original CSS with a certain label produced a compatible multi-browser bread crumbs case, interested to see:
Html
<ul class= "Clearfix" >
<li> Crumb One <em></em><i></i></li>
<li class= "Current" > breadcrumbs two <em></em><i></i></li>
<li> bread crumbs Two <em></em><i></i></li>
</ul>
CSS
. demo{
width:600px;
margin:100px Auto;
Background: #f0f0f0;
height:32px;
Overflow:hidden;
line-height:32px;
position:relative;
}
. Demo li{
Float:left;
width:200px;
Text-align:center;
position:relative;
Z-index:2;
Font-weight:bold;
font-size:14px;
}
. demo Li em{
Position:absolute;
right:-24px;
top:-8px;
width:0;
height:0;
line-height:0;
border-width:24px 0 24px 24px;
Border-color:transparent Transparent transparent #fff;
Border-style:dashed dashed dashed solid;
}
. demo Li i{
Position:absolute;
right:-16px;
top:0;
width:0;
height:0;
line-height:0;
border-width:16px 0 16px 16px;
Border-color:transparent Transparent transparent #f0f0f0;
Border-style:dashed dashed dashed solid;
}
. Demo li.current{
Background: #f60;
Color: #fff;
Z-index:1;
}
. Demo Li.current i{
Border-color:transparent Transparent transparent #f60;
}