|
<style type="text/css"> |
|
.breadcrumb{ |
|
display: block; |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
.breadcrumb.inline{ |
|
display: inline-block; |
|
} |
|
.breadcrumb > li, |
|
.breadcrumb > div{ |
|
display: inline-block; |
|
list-style: none; |
|
margin-right: -15px; |
|
} |
|
|
|
.breadcrumb .step, |
|
.breadcrumb > li > div{ |
|
display: inline-block; |
|
background-color: #999; |
|
margin: 2px; |
|
padding: 0 8px 0 8px; |
|
margin-right: 15px; |
|
margin-left: 15px; |
|
color: #fff; |
|
position: relative; |
|
height: 30px; |
|
line-height: 30px; |
|
} |
|
.breadcrumb.clear-initial-trail > li:first-child > div, |
|
.breadcrumb.clear-initial-trail > div:first-child .step{ |
|
margin-left: 0; |
|
padding-left: 10px; |
|
border-top-left-radius: 2px; |
|
border-bottom-left-radius: 2px; |
|
} |
|
.breadcrumb.clear-initial-trail > li:first-child > div::before, |
|
.breadcrumb.clear-initial-trail > div:first-child .step::before{ |
|
display: none; |
|
} |
|
.breadcrumb .step::after, |
|
.breadcrumb > li > div::after{ |
|
display: block; |
|
position: absolute; |
|
top:0; |
|
left: 100%; |
|
content: ''; |
|
border: 15px solid transparent; |
|
border-left-width: 15px; |
|
border-right-width: 0px; |
|
z-index: 10; |
|
border-left-color: #999; |
|
} |
|
.breadcrumb .step::before, |
|
.breadcrumb > li > div::before{ |
|
display: block; |
|
position: absolute; |
|
top:0; |
|
right: 100%; |
|
content: ''; |
|
background-color: #999; |
|
border: 15px solid transparent; |
|
border-left-width: 15px; |
|
border-right-width: 0px; |
|
border-left-color: #fff; |
|
} |
|
</style> |
|
<div> |
|
<h3>With div-structure</h3> |
|
<h4>Breadcrumb without clearing initial Tail </h4> |
|
<div class="breadcrumb"> |
|
<div><div class="step">Step 1</div></div> |
|
<div><div class="step">Step 2</div></div> |
|
<div><div class="step">Step 3</div></div> |
|
</div> |
|
<h4>Breadcrumb with clearing initial Tail </h4> |
|
<div class="breadcrumb clear-initial-trail"> |
|
<div><div class="step">Step 1</div></div> |
|
<div><div class="step">Step 2</div></div> |
|
<div><div class="step">Step 3</div></div> |
|
</div> |
|
</div> |
|
<div> |
|
<h3>With ul-li structure</h3> |
|
<h4>Breadcrumb with clearing initial Tail </h4> |
|
<ul class="breadcrumb clear-initial-trail"> |
|
<li><div>Step 1</div></li> |
|
<li><div>Step 2</div></li> |
|
<li><div>Step 3</div></li> |
|
</ul> |
|
<h4>Breadcrumb without clearing initial Tail </h4> |
|
<ul class="breadcrumb"> |
|
<li><div>Step 1</div></li> |
|
<li><div>Step 2</div></li> |
|
<li><div>Step 3</div></li> |
|
</ul> |
|
</div> |
