html
<div id="crumbs">
<ul>
<li><span class="current">数据导入</span></li>
<li><span>数据预览</span></li>
<li><span>完成</span></li>
</ul>
</div>
css
#crumbs {
margin: 10px 0;
}
#crumbs ul {
list-style: none;
display: inline-table;
width: 100%;
padding: 0 3%;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li span {
display: block;
float: left;
width: 30%;
height: 40px;
line-height: 40px;
background: #f8f8f8;
text-align: center;
position: relative;
margin: 0 10px 0 0;
font-size: 14px;
text-decoration: none;
}
#crumbs ul li span.current {
background: #21b9bb;
color: #fff;
}
#crumbs ul li span:after {
content: "";
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #f8f8f8;
position: absolute;
right: -20px;
top: 0;
z-index: 1;
}
#crumbs ul li span.current:after {
border-left: 20px solid #21b9bb;
}
#crumbs ul li span:before {
content: "";
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child span {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#crumbs ul li:first-child span:before {
display: none;
}
#crumbs ul li:last-child span {
border-top-right-radius:4px;
border-bottom-right-radius: 4px;
}
#crumbs ul li:last-child span:after {
display: none;
}