纯干货：css3单边倾斜-异形tab切换的实现方法

先来看效果： 

 实际实现中，第一个tab项是只有右边是倾斜的，左边是竖直的，跟我们平时的写法不同。

实现方法： 

这里的方法就是用before和after叠加实现。

Html: 

<div class="bd">
        <div class="tabs">
            <div class="tab tab1 active">运价服务</div>
            <div class="tab tab2 ">操作服务</div>
            <div class="tab tab3 ">资讯与推介</div>
        </div>

        <div class="tabbd">

        </div>
    </div>

Css: 

<style>
    .bd{
        width: 1180px;
        margin: 50px auto;
    }
    .tabbd{
        background: url(bg.png) no-repeat;
        height: 284px;
        border: 1px solid #abe3ff;
        box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
        border-radius: 0 10px 10px 10px;
    }
    .tabs{
        position: relative;
        display: flex;
    }
    .tab{
        width: 167px;
        height: 36px;
        line-height: 36px;
        position: relative;
        color: #4b6375;
        font-size: 15px;
        margin-right: 2px;
        border-bottom: 1px solid #fff;
        text-align: center;
    }
    .tab::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 167px;
        height: 100%;
        background-color: #cfe6f1;
        border-radius: 8px 8px 0 0;
        transform: skewX(15deg);
        z-index: -1;
    }
   
    .active{
        color: #0096e0;
    }
    .active::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 167px;
        height: 100%;
        background-color: #c8eeff;
    }
    .tab1::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 130%;
        background-color: #cfe6f1;
        z-index: -2;
        border-radius: 10px 0 0 0;
    }
    .tab1::after{
        width: 157px;
        left: 10px;
    }
    .tab1.active::before{
        background-color: #c8eeff;
    }
    .tab.active{
        border-bottom: 0 !important;
        height: 37px;
        z-index: 2;
    }
    .tab.active::before{
        height: 130%;
        border-left: 1px solid #abe3ff;
    }
    .tab.active::after{
        height: 102%;
        border: 1px solid #abe3ff;
        border-width: 1px 1px 0 0;
    }
  </style>

总结： 

在第一个tab上面，叠加两个背景，一个背景不倾斜，一个背景倾斜，这样就能完美实现效果了。高度要高于其他选项，这样就能遮住下面的内容。

其他的选项就直接用transform: skewX(15deg)就可以了。

这里主打的就是一个灵活运用，并没有实现难度。