CSS:
.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;
}
HTML:
One
Two
Three
Four
Five
效果：
breadcrumb.png
作者：Guokwei
链接：https://www.jianshu.com/p/34b95d910805
