自定义tabs标签页样式

<div class="tabs">
    <span class="tabs-item">通话通联核查结果列表</span>
    <span class="tabs-item is-active">短信通联核查结果列表</span>
</div>

.tabs{  
    .tabs-item{
      position: relative;
      border: 1px solid transparent;
      display: inline-block;
      box-sizing: border-box;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      font-size: 14px;
      font-weight: 500;
      color: #909399;
      background-color: #f5f7fa;
      cursor:pointer;
      &:after {  
        content: ''; 
        border-left: 15px solid #f5f7fa;
        border-top: 15px solid transparent;  
        border-bottom: 15px solid transparent;  
        position: absolute;   
        right: -15px;   
        top: 0;
        z-index: 2;
      }
      &:before{  
        content: '';  
        display: block;
        border-left: 15px solid #f5f7fa;
        border-top: 15px solid #f5f7fa;  
        border-bottom: 15px solid #f5f7fa;  
        position: absolute;   
        left: -1px;   
        top: 0;  
      }
    }
    .tabs-item:first-child:before{    
      display: none;    
    }
    .is-active{
      color: #fff;
      background-color: #3C72CC;
      border-right-color: #3C72CC;
      border-left-color: #3C72CC;
    }
    .is-active:before {  
      border-top-color: #3C72CC;
      border-bottom-color: #3C72CC;
    }
    
    .is-active:after{
      border-left: 15px solid #3C72CC;
    }
  }