效果:
代码:
<!DOCTYPE html>
<html lang="zh-CN" ng-app="phonecatApp">
<head>
<meta charset="UTF-8">
<title>CSS步骤条</title>
<style>
.step-container {
margin: 0;
padding: 0;
width: 100%;
}
.step-container li {
display: inline-block;
float: left;
position: relative;
margin: 0;
padding: 0;
width: 33%;
height: 30px;
line-height: 30px;
font-size: 12px;
text-align: center;
background-color: #ccc;
color: #ffffff;
}
.step-container li.step-past {
background-color: #9cddf5;
width: 34%;
}
.step-container li.step-current {
background-color: #00a2ca;
}
.arrow {
position: absolute;
right: -7.5px;
height: 30px;
background-color: #ffffff;
z-index: 2;
}
.arrow span {
display: inline-block;
border-left: 15px solid transparent;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.arrow-next {
margin-left: -15px;
}
.arrow-past .arrow-pre {
border-left: 15px solid #9cddf5;
}
.arrow-past .arrow-next {
border-top: 15px solid #00a2ca;
border-bottom: 15px solid #00a2ca;
}
.arrow-current .arrow-pre {
border-left: 15px solid #00a2ca;
}
.arrow-current .arrow-next {
border-top: 15px solid #cccccc;
border-bottom: 15px solid #cccccc;
}
</style>
</head>
<body >
<ul class="step-container">
<li class="step-past">第一步
<span class="arrow arrow-past">
<span class="arrow-pre"></span>
<span class="arrow-next"></span>
</span>
</li>
<li class="step-current">第二步
<span class="arrow arrow-current">
<span class="arrow-pre"></span>
<span class="arrow-next"></span>
</span>
</li>
<li class="step-next">第三步</li>
</ul>
</body>
</html>
补充:
去除浮动:
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}