.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 }
分布操作的步骤样式,展现了css的属性和伪类