CSS标签页直线中间凸起

效果图

样式的编写

.tabLine{
    
    
    margin-bottom: -2px;
    border-bottom: 2px solid #F5A724 ;
    color: #F5A724 ;
    position: relative;
  }
  .tabLine:before{
    
    
    position: absolute;
    top: 42px; left: 45%;
    content: '';
    width: 0; height: 0;
    border-style: dashed dashed solid dashed;
    border-width:10px;
    border-color: transparent transparent #F5A724 transparent;
  }
  .tabLine:after{
    
    
    position: absolute;
    top: 45px;
    left: 45%;
    content: '';
    width: 0;
    height: 0;
    border-style: dashed dashed solid dashed;
    border-width: 10px;
    border-color: transparent transparent #F8FAFC transparent;
  }