CSS:
<pre>
</code>
.breadcrumb {
width:600px;
margin:auto;
text-align: center;
}
.breadcrumb a {
background-color: red;
border-left: 0;
color: white;
display: inline-block;
line-height: 40px;
width:80px;
position: relative;
margin-right:12px;
text-decoration: none;
padding-left:20px;
}
.breadcrumb a:after,
.breadcrumb a:before {
position: absolute;
top: 0px;
right: auto;
bottom: 0px;
left: 100%;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-top: 20px solid transparent;
content: '';
display: block;
margin: auto;
z-index: 2;
}
.breadcrumb a:before {
border-left-color: red;
}
.breadcrumb a:after {
border-left-color:red;
}
</code>
</pre>

HTML:
<pre>
<code>
<div class="breadcrumb">
<a href="javascript:;">One</a>
<a href="javascript:;">Two</a>
<a href="javascript:;">Three</a>
<a href="javascript:;">Four</a>
<a href="javascript:;">Five</a>
</div>
</code>
</pre>

效果：

breadcrumb.png

作者：Guokwei
链接：https://www.jianshu.com/p/34b95d910805