原生html写步骤条,纯css实现步骤条

示例

html

• 数据导入
• 数据预览
• 完成

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;

}