先来看效果： 

 实际实现中，第一个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;
        bo