这也是公司用到的，写个demo出来分享
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流程导图</title>
<style>
.warpper{
width: 882px;
margin: 50px auto;
text-align: center;
position: relative;
}
.progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
.progressbar li {
list-style-type: none;
color: #33abff;
text-transform: uppercase;
font-size: 16px;
width: 25%;
float: left;
position: relative; } .progressbar li:before {
content: ' ';
width: 92px;
height:80px;
line-height: 80px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 5px;
margin: 0 auto 24px auto;
border:1px solid #33abff; background:#fff url(images/g.png) center center no-repeat;
background-size:50%;
} .progressbar li:after {
content: '';
width: 100%;
height: 1px;
background: #33abff;
position: absolute;
left: -50%;
top: 40px;
z-index: -1;
} .progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
</style>
</head>
<body>
<div class="warpper">
<ul class="progressbar">
<li>扫我的二维码</li>
<li>分享给好友或朋友圈</li>
<li>好友注册葛优躺</li>
<li>邀请好友成功</li>
</ul>
</div>
</body>
</html>