这也是公司用到的，写个demo出来分享
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>流程导图</title> 6 <style> 7 .warpper{ 8 width: 882px; 9 margin: 50px auto; 10 text-align: center; 11 position: relative; 12 } 13 .progressbar { 14 margin-bottom: 30px; 15 overflow: hidden; 16 counter-reset: step; 17 } 18 .progressbar li { 19 list-style-type: none; 20 color: #33abff; 21 text-transform: uppercase; 22 font-size: 16px; 23 width: 25%; 24 float: left; 25 position: relative; 26 27 28 } 29 30 .progressbar li:before { 31 content: ' '; 32 width: 92px; 33 height:80px; 34 line-height: 80px; 35 display: block; 36 font-size: 10px; 37 color: #333; 38 background: white; 39 border-radius: 5px; 40 margin: 0 auto 24px auto; 41 border:1px solid #33abff; 42 43 background:#fff url(images/g.png) center center no-repeat; 44 background-size:50%; 45 } 46 47 .progressbar li:after { 48 content: ''; 49 width: 100%; 50 height: 1px; 51 background: #33abff; 52 position: absolute; 53 left: -50%; 54 top: 40px; 55 z-index: -1; 56 } 57 58 .progressbar li:first-child:after { 59 /*connector not needed before the first step*/ 60 content: none; 61 } 62 </style> 63 </head> 64 <body> 65 <div class="warpper"> 66 <ul class="progressbar"> 67 <li>扫我的二维码</li> 68 <li>分享给好友或朋友圈</li> 69 <li>好友注册葛优躺</li> 70 <li>邀请好友成功</li> 71 </ul> 72 </div> 73 </body> 74 </html>