使用css :after修饰符制作antd斜边框

最近我们优秀的产品有这样一个需求

希望做一个带斜边框样式的tab页签，使用方法和tab类似，只是样式是这样不规则的

我们首先想着的是用antd的tab组件

但是tab组件只能做成下面这个样子，即不好看，也不符合要求

而且，antd的tab组件是没有什么斜边框或者不规则图形的自定义属性的

这个时候就需要思考了，有下面几种解决方法：

1.直接用snap画一个矢量图形，然后把tab元素替换

2.和产品打一架，让他把设计稿改成普通的tab样式

3.自己开始造轮子，从0开始写一个带斜边框的tab组件

4.用原生css将tab的样式改成带斜边框

好的，那么的话首先我们不能手动绘制一个图形并绑定，因为这是一个组件，我们还得使用组件的功能；

其次我也打不过产品；

最后优秀的前端工程师肯定是避免造轮子的，而且这种纯样式问题我们肯定也不想造轮子

那么就需要用到原生css了，那么首先我们不能直接对这些已经封装好的组件用class类选择器，需要用到全局样式进行外部封装；其次我们不能直接用border进行修改；最后我们还需要让斜边框属于这个tab对象的一部分，否则会出现无法选择的情况。
 

所以，只能使用:after选择器，在选择到tab对象之后，直接在tab后面增加一个斜边框元素就行

说干就干,我们先把整体的样式和背景颜色改成需要的样子

.TabsContainer {
  position: relative;

  :global(.ant-tabs .ant-tabs-nav) {
    margin-bottom: 0;
    background-color: #F3F3F3;
  }

  :global(.ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab) {
    margin-right: 20px;
    background: #E0EAF3;

    :global(.ant-tabs-tab-btn) {
      z-index: 20;
    }
  }

  :global(.ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab.ant-tabs-tab-active) {
    background: #fff;
    z-index: 10;

    :global(.ant-tabs-tab-btn) {
      color: #0D7EDB;
    }
  }
}

（用到了大量的gobal来选择到tab,如果不知道antd的tab组件中都是什么属性名的话，可以直接读取打包后的html源码来获取）

其中需要区分的是ant-tabs-tab-active和普通的ant-tabs-tab，前者是当前选中的tab标签，后者是没有选中的标签，两者最大区别是字体颜色和背景色不同（我们制作的斜边框也会因此不同）

效果如下：

之后，我们得为我们的斜边框元素预留位置，位置大小大概就是斜边框的宽度（大概20px宽，之后可以调整）

（在和tab有关的样式中添加margin属性）

这样的话，我们才有20px的宽度去写我们的after

然后我们编写after属性

  //未激活的tab的after属性
:global(.ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab) {
    margin-right: 20px;
    background: #E0EAF3;

    &:after {
      content: '';
      width: 30px;
      height: 102%;
      background: #E0EAF3;
      position: absolute;
      right: -20px;
      top: 0;
    }

    :global(.ant-tabs-tab-btn) {
      z-index: 20;
    }
  }

//激活的tab的after属性  最大不同是background颜色不同
:global(.ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab.ant-tabs-tab-active) {
    background: #fff;
    z-index: 10;

    &:after {
      content: '';
      background: #fff;
      z-index: 10;
    }

    :global(.ant-tabs-tab-btn) {
      color: #0D7EDB;
    }
  }

（ 因为是带有重叠的效果的，使用还得设置一下z-index，而且，after的宽度应该是要大于我们刚刚设定的20px）

 我们可以看到我们定义的after是好好显示了，而且背景色和本身的tab的背景色一致，最后我们只需要让这个方框偏转30度就可以了！

可以直接用css的transform属性，设置skew偏转就可以

（skew可以使元素偏转，使得高度不变，需要注意的是和旋转rotate区分）

在after中加transform属性

 

 

 最后效果：

而且自由切换tab的话也没有问题

全css代码：

.TabsContainer {
  position: relative;

  :global(.ant-tabs .ant-tabs-nav) {
    margin-bottom: 0;
    background-color: #F3F3F3;
  }

  :global(.ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab) {
    margin-right: 20px;
    background: #E0EAF3;

    &:after {
      content: '';
      width: 30px;
      height: 102%;
      background: #E0EAF3;
      position: absolute;
      right: -20px;
      top: 0;
      transform: skew(30deg);
    }

    :global(.ant-tabs-tab-btn) {
      z-index: 20;
    }
  }

  :global(.ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab.ant-tabs-tab-active) {
    background: #fff;
    z-index: 10;

    &:after {
      content: '';
      background: #fff;
      z-index: 10;
    }

    :global(.ant-tabs-tab-btn) {
      color: #0D7EDB;
    }
  }
}

.Breadcrumb {
  :global(.ant-breadcrumb-link) {
    color: rgba(0, 0, 0, 0.45);
  }

  :global(.ant-breadcrumb-separator) {
    color: rgba(0, 0, 0, 0.85);
  }
}

全html代码