.tabs { margin:0 auto; display:inline-block; } .tabs .tabs-item { position:relative; display:inline-block; border:0; background:transparent; margin-right:0; text-align:center; color:#7C89BB; text-transform:uppercase; text-decoration:none; font:18px/1 MicrosoftYaHei; cursor:pointer; z-index:10; padding:16px 0; font-size:14px; width:162px; } .tabs a:link,.tabs a:visited,.tabs a:hover,.tabs a:active { text-decoration:none } .tabs>.tabs-item::before,.tabs>.tabs-item:last-child::before { content:''; position:absolute; top:0; right:-4px; bottom:0; left:0; z-index:-1; background:#dedede; transform:skew(45deg); border-right:1px solid #3D3D3D; } .tabs>.tabs-item:first-child::after { content:''; position:absolute; top:0; bottom:0; left:-23px; right:90px; z-index:-1; background:#dedede; } .tabs>.tabs-item:last-child::after { content:''; position:absolute; top:0; bottom:0; left:60px; right:-26px; z-index:-1; background:#dedede; } .tabs .tabs-item:hover::before,.tabs>.tabs-item:last-child:hover::before,.tabs>.tabs-item:first-child:hover::after,.tabs>.tabs-item:first-child:hover::before,.tabs>.tabs-item:last-child:hover::after { background:#000; } .tabs .tabs-item:hover { color:red; } .tabs .tabs-item.active { color:red; &:hover::before,&:last-child::before,&:first-child::after,&:first-child::before,&:last-child::after { background:#000; }