纯css分步操作的样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css分步操作的样式-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style> .cerate_shop_ul { width:1205px; } .cerate_shop_ul li { display:inline-block; position:relative; margin-right:5px; line-height:50px; height:50px; width:232px; background:#EBEBEB; text-align:center; } .cerate_shop_ul li:first-child:before { border:0 } .cerate_shop_ul li:last-child:after { border:0 } .cerate_shop_ul li:before { position:absolute; left:0; top:0; height:0; width:0; border-bottom:25px inset transparent; border-left:25px solid #fff; border-top:25px inset transparent; content:"" } .cerate_shop_ul li:after { position:absolute; right:-25px; top:0; height:0; width:0; border-bottom:25px inset transparent; border-left:25px solid #EBEBEB; border-top:25px inset transparent; content:""; z-index:2 } .cerate_shop_ul .active { color:#fff; background:#FF6162 } .cerate_shop_ul .active:after { border-left-color:#FF6162 } </style> </head> <body> <ul class="cerate_shop_ul"> <li style="z-index: 5;">创建店铺</li> <li class="active" style="z-index: 4;">选择功能模块</li> <li style="z-index: 3;">确认订购信息</li> <li style="z-index: 2;">确认付款</li> <li style="z-index: 1;">订购成功</li> </ul> <script> <!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css分步操作的样式-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style> .cerate_shop_ul { width:1205px; } .cerate_shop_ul li { display:inline-block; position:relative; margin-right:5px; line-height:50px; height:50px; width:232px; background:#EBEBEB; text-align:center; } .cerate_shop_ul li:first-child:before { border:0 } .cerate_shop_ul li:last-child:after { border:0 } .cerate_shop_ul li:before { position:absolute; left:0; top:0; height:0; width:0; border-bottom:25px inset transparent; border-left:25px solid #fff; border-top:25px inset transparent; content:"" } .cerate_shop_ul li:after { position:absolute; right:-25px; top:0; height:0; width:0; border-bottom:25px inset transparent; border-left:25px solid #EBEBEB; border-top:25px inset transparent; content:""; z-index:2 } .cerate_shop_ul .active { color:#fff; background:#FF6162 } .cerate_shop_ul .active:after { border-left-color:#FF6162 } </style> </head> <body> <ul class="cerate_shop_ul"> <li style="z-index: 5;">创建店铺</li> <li class="active" style="z-index: 4;">选择功能模块</li> <li style="z-index: 3;">确认订购信息</li> <li style="z-index: 2;">确认付款</li> <li style="z-index: 1;">订购成功</li> </ul> <script> </script> </body> </html> </script> </body> </html>