响应式箭头面包屑导航
Responsive Arrow Breadcrumb Navigation
所以我有一个面包屑导航，箭头间隔开。棘手的是我需要它来响应。我想我在使用 vh 和 vw 时很乱，但我 运行 遇到的问题是白色垫片没有像它前面的箭头那样响应。有什么建议么？或者有更好的方法来处理它吗？我尝试了很多方法，但 none 似乎有效。任何帮助是极大的赞赏。 Fiddle 已收录
https://jsfiddle.net/8v9ctam0/
/* ----------------------
General Styling
------------------------*/
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cd-breadcrumb, .cd-multi-steps {
padding: 0.5em 1em;
margin: 1em auto;
background-color: #edeff0;
border-radius: .25em;
}
.cd-breadcrumb:after, .cd-multi-steps:after {
content: "";
display: table;
clear: both;
}
.cd-breadcrumb li, .cd-multi-steps li {
display: inline-block;
float: left;
margin: 0.5em 0;
}
.cd-breadcrumb li::after, .cd-multi-steps li::after {
/* this is the separator between items */
display: inline-block;
content: '[=10=]bb';
margin: 0 .6em;
color: #959fa5;
}
.cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {
/* hide separator after the last item */
display: none;
}
.cd-breadcrumb li > *, .cd-multi-steps li > * {
/* single step */
display: inline-block;
font-size: 1.0vw;
color: #2c3f4c;
}
.cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {
/* selected step */
color: #96c03d;
}
.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {
/* steps already visited */
color: #96c03d;
}
.cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after {
/* replace the default arrow separator with a custom icon */
content: '';
height: 16px;
width: 16px;
background: url(../img/cd-custom-separator.svg) no-repeat center center;
vertical-align: middle;
}
.cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before {
/* add a custom icon before each item */
content: '';
display: inline-block;
height: 20px;
width: 20px;
margin-right: .4em;
margin-top: -2px;
background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
vertical-align: middle;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
/* change custom icon using image sprites */
background-position: -20px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
background-position: -40px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
background-position: -60px 0;
}
.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before {
/* change custom icon for the current item */
background-position: 0 -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
background-position: -20px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
background-position: -40px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
background-position: -60px -20px;
}
@media only screen and (min-width: 768px) {
.cd-breadcrumb, .cd-multi-steps {
padding: 0 1.2em;
}
.cd-breadcrumb li, .cd-multi-steps li {
margin: 1.2em 0;
}
.cd-breadcrumb li::after, .cd-multi-steps li::after {
margin: 0 1em;
}
}
/* --------------------------------
Triangle breadcrumb
-------------------------------- */
.cd-breadcrumb.triangle {
/* reset basic style */
background-color: transparent;
padding: 0;
}
.cd-breadcrumb.triangle li {
position: relative;
padding: 0;
margin: 4px 4px 4px 4px;
}
.checkout {
max-height: 5.0vh;
line-height: 2.5vh;
}
.cd-breadcrumb.triangle li strong {
display: block;
}
.cd-breadcrumb.triangle li:last-of-type {
margin-right: 0;
}
.cd-breadcrumb.triangle li > * {
position: relative;
padding: 1em .8em 1em 2.5em;
color: #2c3f4c;
background-color: #edeff0;
/* the border color is used to style its ::after pseudo-element */
border-color: #edeff0;
}
.cd-breadcrumb.triangle li.current > * {
/* selected step */
color: #ffffff;
background-color: #F00;
border-color: #F00;
}
.cd-breadcrumb.triangle li:first-of-type > * {
padding-left: 1.6em;
}
.cd-breadcrumb.triangle li:last-of-type > * {
padding-right: 1.6em;
}
.no-touch .cd-breadcrumb.triangle a:hover {
/* steps already visited */
color: #ffffff;
background-color: #2c3f4c;
border-color: #2c3f4c;
}
.cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
/*
li > *::after is the colored triangle after each item
li::after is the white separator between two items
*/
content: '';
position: absolute;
top: 0;
left: 100%;
content: '';
height: 0;
width: 0;
/* 48px is the height of the <a> element */
border: 2.1em solid transparent;
border-right-width: 0;
border-left-width: 0.8em;
}
.cd-breadcrumb.triangle li::after {
/* this is the white separator between two items */
z-index: 1;
-webkit-transform: translateX(8px);
-moz-transform: translateX(8px);
-ms-transform: translateX(8px);
-o-transform: translateX(8px);
transform: translateX(8px);
border-left-color: #ffffff;
/* reset style */
margin: 0;
}
.cd-breadcrumb.triangle li > *::after {
/* this is the colored triangle after each element */
z-index: 2;
border-left-color: inherit;
}
.cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after {
/* hide the triangle after the last step */
display: none;
}
.cd-breadcrumb.triangle.custom-separator li::after {
/* reset style */
background-image: none;
}
.cd-breadcrumb.triangle.custom-icons li::after, .cd-breadcrumb.triangle.custom-icons li > *::after {
/* 50px is the height of the <a> element */
border-top-width: 25px;
border-bottom-width: 25px;
}
@-moz-document url-prefix() {
.cd-breadcrumb.triangle li::after,
.cd-breadcrumb.triangle li > *::after {
/* fix a bug on Firefix - tooth edge on css triangle */
border-left-style: dashed;
}
}
<body>
<section>
<nav>
<ol class="cd-breadcrumb triangle">
<li><a href="#0" class="checkout"><strong>Checkout</strong></a></li>
<li class="current"><a href="#0"><strong>Step 1:</strong>Account</a></li>
<li><a href="#0"><strong>Step 2:</strong>Shipping</a></li>
<li><a href="#0"><strong>Step 3:</strong>Payment & Place Order</a></li>
<li><a href="#0"><strong>Step 4:</strong>Confirmation</a></li>
</ol>
</nav>
</section>
</body>
你可以使用线性渐变：
运行 全页模式下的代码段，用于在调整 window :)
时增大或减小字体大小
或在 http://codepen.io/gcyrillus/pen/aNNdyq
玩
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ol {
display:table;/* to fit to content */
overflow:hidden;/* will hide bit arrow of last li if negative margin-right set there */
white-space:nowrap;/* keep inline-block li on a single line */
font-size:0.65em;
}
ol li {
display:inline-block;/* be an inline boxe */
margin-top:1em; /* get some air , optionnal */
margin-right:-1.3em;/* overlay them to reduce white gap in between. tune in em to your needs */
line-height:1.2em; /* tune to your needs */
padding:1em 2em;/* should be fine with gradient bg */
background:linear-gradient(70deg, transparent 1em, lightgray 1em, lightgray 50%, transparent 50%) top left no-repeat,
linear-gradient(-110deg, transparent 1em, lightgray 1em, lightgray 55%, transparent 55%) top no-repeat,
linear-gradient(-70deg, transparent 1em, lightgray 1em, lightgray 50%, transparent 50%) bottom left no-repeat,
linear-gradient(110deg, transparent 1em, lightgray 1em, lightgray 55%, transparent 55%) bottom no-repeat;
/*bg arrow color is lightgray, to chanage it, change each one of theme in gradient */
background-size:100% 51.5% ;/* resize each piece a gradient to draw the shape */
}
ol li.current, ol li:hover {
background:linear-gradient(70deg, transparent 1em, #FF0000 1em, #FF0000 50%, transparent 50%) top left no-repeat,
linear-gradient(-110deg, transparent 1em, #FF0000 1em, #FF0000 55%, transparent 55%) top no-repeat,
linear-gradient(-70deg, transparent 1em, #FF0000 1em, #FF0000 50%, transparent 50%) bottom left no-repeat,
linear-gradient(110deg, transparent 1em, #FF0000 1em, #FF0000 55%, transparent 55%) bottom no-repeat;
/* bg arrow color is now red */
background-size:100% 51.5% ;
}
ol li.current a, ol li:hover a {
color:white;
}
a {
text-decoration:none;
color:orange;
text-shadow:1px 1px 1px black,-1px -1px 1px gray;
font-variant:small-caps;
font-weight:bold;
transition:0.2s;
}
@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}
<body>
<section>
<nav>
<ol class="cd-breadcrumb triangle">
<li><a href="#0" class="checkout"><strong>Checkout</strong></a></li>
<li class="current"><a href="#0"><strong>Step 1:</strong>Account</a></li>
<li><a href="#0"><strong>Step 2:</strong>Shipping</a></li>
<li><a href="#0"><strong>Step 3:</strong>Payment & Place Order</a></li>
<li><a href="#0"><strong>Step 4:</strong>Confirmation</a></li>
</ol>
</nav>
</section>
</body>
这是一个非常简单的制作方法，但它使用转换，因此您的目标浏览器必须支持 属性（大多数最新的浏览器都支持）。
body {
padding-top: 95px;
}
.crumb-trail {
background-color: #CCD2D8;
color: #62717C;
list-style: none;
padding: 0px;
margin: auto;
width: 80%;
}
.crumb {
padding: 4px 16px;
position: relative;
}
.crumb:not(:last-child):before,
.crumb:not(:last-child):after {
content: '';
display: inline-block;
height: 1px;
width: 17px;
position: absolute;
right: -7px;
background-color: #fff;
}
.crumb:before {
top: 6px;
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.crumb:after {
bottom: 6px;
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BreadCrumbs</title>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="breadcrumbs.css">
</head>
<body>
<ul class="crumb-trail clearfix">
<li class="crumb pull-left">
Home
</li>
<li class="crumb pull-left">
Forums
</li>
<li class="crumb pull-left">
Search page
</li>
<li class="crumb pull-left">
Preview: Search criteria
</li>
</ul>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
所以我有一个面包屑导航，箭头间隔开。棘手的是我需要它来响应。我想我在使用 vh 和 vw 时很乱，但我 运行 遇到的问题是白色垫片没有像它前面的箭头那样响应。有什么建议么？或者有更好的方法来处理它吗？我尝试了很多方法，但 none 似乎有效。任何帮助是极大的赞赏。 Fiddle 已收录
https://jsfiddle.net/8v9ctam0/
/* ----------------------
General Styling
------------------------*/
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cd-breadcrumb, .cd-multi-steps {
padding: 0.5em 1em;
margin: 1em auto;
background-color: #edeff0;
border-radius: .25em;
}
.cd-breadcrumb:after, .cd-multi-steps:after {
content: "";
display: table;
clear: both;
}
.cd-breadcrumb li, .cd-multi-steps li {
display: inline-block;
float: left;
margin: 0.5em 0;
}
.cd-breadcrumb li::after, .cd-multi-steps li::after {
/* this is the separator between items */
display: inline-block;
content: '[=10=]bb';
margin: 0 .6em;
color: #959fa5;
}
.cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {
/* hide separator after the last item */
display: none;
}
.cd-breadcrumb li > *, .cd-multi-steps li > * {
/* single step */
display: inline-block;
font-size: 1.0vw;
color: #2c3f4c;
}
.cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {
/* selected step */
color: #96c03d;
}
.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {
/* steps already visited */
color: #96c03d;
}
.cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after {
/* replace the default arrow separator with a custom icon */
content: '';
height: 16px;
width: 16px;
background: url(../img/cd-custom-separator.svg) no-repeat center center;
vertical-align: middle;
}
.cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before {
/* add a custom icon before each item */
content: '';
display: inline-block;
height: 20px;
width: 20px;
margin-right: .4em;
margin-top: -2px;
background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
vertical-align: middle;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
/* change custom icon using image sprites */
background-position: -20px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
background-position: -40px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
background-position: -60px 0;
}
.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before {
/* change custom icon for the current item */
background-position: 0 -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
background-position: -20px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
background-position: -40px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
background-position: -60px -20px;
}
@media only screen and (min-width: 768px) {
.cd-breadcrumb, .cd-multi-steps {
padding: 0 1.2em;
}
.cd-breadcrumb li, .cd-multi-steps li {
margin: 1.2em 0;
}
.cd-breadcrumb li::after, .cd-multi-steps li::after {
margin: 0 1em;
}
}
/* --------------------------------
Triangle breadcrumb
-------------------------------- */
.cd-breadcrumb.triangle {
/* reset basic style */
background-color: transparent;
padding: 0;
}
.cd-breadcrumb.triangle li {
position: relative;
padding: 0;
margin: 4px 4px 4px 4px;
}
.checkout {
max-height: 5.0vh;
line-height: 2.5vh;
}
.cd-breadcrumb.triangle li strong {
display: block;
}
.cd-breadcrumb.triangle li:last-of-type {
margin-right: 0;
}
.cd-breadcrumb.triangle li > * {
position: relative;
padding: 1em .8em 1em 2.5em;
color: #2c3f4c;
background-color: #edeff0;
/* the border color is used to style its ::after pseudo-element */
border-color: #edeff0;
}
.cd-breadcrumb.triangle li.current > * {
/* selected step */
color: #ffffff;
background-color: #F00;
border-color: #F00;
}
.cd-breadcrumb.triangle li:first-of-type > * {
padding-left: 1.6em;
}
.cd-breadcrumb.triangle li:last-of-type > * {
padding-right: 1.6em;
}
.no-touch .cd-breadcrumb.triangle a:hover {
/* steps already visited */
color: #ffffff;
background-color: #2c3f4c;
border-color: #2c3f4c;
}
.cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
/*
li > *::after is the colored triangle after each item
li::after is the white separator between two items
*/
content: '';
position: absolute;
top: 0;
left: 100%;
content: '';
height: 0;
width: 0;
/* 48px is the height of the <a> element */
border: 2.1em solid transparent;
border-right-width: 0;
border-left-width: 0.8em;
}
.cd-breadcrumb.triangle li::after {
/* this is the white separator between two items */
z-index: 1;
-webkit-transform: translateX(8px);
-moz-transform: translateX(8px);
-ms-transform: translateX(8px);
-o-transform: translateX(8px);
transform: translateX(8px);
border-left-color: #ffffff;
/* reset style */
margin: 0;
}
.cd-breadcrumb.triangle li > *::after {
/* this is the colored triangle after each element */
z-index: 2;
border-left-color: inherit;
}
.cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after {
/* hide the triangle after the last step */
display: none;
}
.cd-breadcrumb.triangle.custom-separator li::after {
/* reset style */
background-image: none;
}
.cd-breadcrumb.triangle.custom-icons li::after, .cd-breadcrumb.triangle.custom-icons li > *::after {
/* 50px is the height of the <a> element */
border-top-width: 25px;
border-bottom-width: 25px;
}
@-moz-document url-prefix() {
.cd-breadcrumb.triangle li::after,
.cd-breadcrumb.triangle li > *::after {
/* fix a bug on Firefix - tooth edge on css triangle */
border-left-style: dashed;
}
}
<body>
<section>
<nav>
<ol class="cd-breadcrumb triangle">
<li><a href="#0" class="checkout"><strong>Checkout</strong></a></li>
<li class="current"><a href="#0"><strong>Step 1:</strong>Account</a></li>
<li><a href="#0"><strong>Step 2:</strong>Shipping</a></li>
<li><a href="#0"><strong>Step 3:</strong>Payment & Place Order</a></li>
<li><a href="#0"><strong>Step 4:</strong>Confirmation</a></li>
</ol>
</nav>
</section>
</body>
你可以使用线性渐变：
运行 全页模式下的代码段，用于在调整 window :)
时增大或减小字体大小或在 http://codepen.io/gcyrillus/pen/aNNdyq
玩* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ol {
display:table;/* to fit to content */
overflow:hidden;/* will hide bit arrow of last li if negative margin-right set there */
white-space:nowrap;/* keep inline-block li on a single line */
font-size:0.65em;
}
ol li {
display:inline-block;/* be an inline boxe */
margin-top:1em; /* get some air , optionnal */
margin-right:-1.3em;/* overlay them to reduce white gap in between. tune in em to your needs */
line-height:1.2em; /* tune to your needs */
padding:1em 2em;/* should be fine with gradient bg */
background:linear-gradient(70deg, transparent 1em, lightgray 1em, lightgray 50%, transparent 50%) top left no-repeat,
linear-gradient(-110deg, transparent 1em, lightgray 1em, lightgray 55%, transparent 55%) top no-repeat,
linear-gradient(-70deg, transparent 1em, lightgray 1em, lightgray 50%, transparent 50%) bottom left no-repeat,
linear-gradient(110deg, transparent 1em, lightgray 1em, lightgray 55%, transparent 55%) bottom no-repeat;
/*bg arrow color is lightgray, to chanage it, change each one of theme in gradient */
background-size:100% 51.5% ;/* resize each piece a gradient to draw the shape */
}
ol li.current, ol li:hover {
background:linear-gradient(70deg, transparent 1em, #FF0000 1em, #FF0000 50%, transparent 50%) top left no-repeat,
linear-gradient(-110deg, transparent 1em, #FF0000 1em, #FF0000 55%, transparent 55%) top no-repeat,
linear-gradient(-70deg, transparent 1em, #FF0000 1em, #FF0000 50%, transparent 50%) bottom left no-repeat,
linear-gradient(110deg, transparent 1em, #FF0000 1em, #FF0000 55%, transparent 55%) bottom no-repeat;
/* bg arrow color is now red */
background-size:100% 51.5% ;
}
ol li.current a, ol li:hover a {
color:white;
}
a {
text-decoration:none;
color:orange;
text-shadow:1px 1px 1px black,-1px -1px 1px gray;
font-variant:small-caps;
font-weight:bold;
transition:0.2s;
}
@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}
<body>
<section>
<nav>
<ol class="cd-breadcrumb triangle">
<li><a href="#0" class="checkout"><strong>Checkout</strong></a></li>
<li class="current"><a href="#0"><strong>Step 1:</strong>Account</a></li>
<li><a href="#0"><strong>Step 2:</strong>Shipping</a></li>
<li><a href="#0"><strong>Step 3:</strong>Payment & Place Order</a></li>
<li><a href="#0"><strong>Step 4:</strong>Confirmation</a></li>
</ol>
</nav>
</section>
</body>
这是一个非常简单的制作方法，但它使用转换，因此您的目标浏览器必须支持 属性（大多数最新的浏览器都支持）。
body {
padding-top: 95px;
}
.crumb-trail {
background-color: #CCD2D8;
color: #62717C;
list-style: none;
padding: 0px;
margin: auto;
width: 80%;
}
.crumb {
padding: 4px 16px;
position: relative;
}
.crumb:not(:last-child):before,
.crumb:not(:last-child):after {
content: '';
display: inline-block;
height: 1px;
width: 17px;
position: absolute;
right: -7px;
background-color: #fff;
}
.crumb:before {
top: 6px;
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.crumb:after {
bottom: 6px;
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BreadCrumbs</title>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="breadcrumbs.css">
</head>
<body>
<ul class="crumb-trail clearfix">
<li class="crumb pull-left">
Home
</li>
<li class="crumb pull-left">
Forums
</li>
<li class="crumb pull-left">
Search page
</li>
<li class="crumb pull-left">
Preview: Search criteria
</li>
</ul>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>