关于使用伪元素制作三角形 有空隙问题

今天项目中需要做一个这样的效果

image

第一时间就想到了使用伪元素

// tab 标签
      /deep/ .van-tab {
        position: relative;
        height: 19px;
        line-height: 20px;
        margin-left: 5px;
        margin-right: 5px;
        text-align: right;
        font-size: 0;

        /deep/ .van-ellipsis {
          color: #ffffff;
          font-size: 16px;
        }

        // 三角形
        &:after {
          content: '';
          position: absolute;
          top: 0;
          right: -10px;
          border: 10px solid #ffffff;
          border-left-color: inherit;
          border-right: none;
          border-top-color: transparent;
          border-bottom-color: transparent;
        }

        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0px;
          border: 10px solid blue;
          border-left-color: #ffffff;
          border-right: none;
          border-top-color: transparent;
          border-bottom-color: transparent;
        }
      }

但做好后发现有些三角形不贴边

image

我想到了三种解决办法

1. 有可能是换行符引起的问题
   • 给使用了伪元素的父级元素设置 font-size: 0;
2. 改换成图片
3. 可能是精确度的问题
   因为我使用了 pxtorem 这类的插件，所以当使用px是可能会出现转换的精确度问题

我将之前的代码改了一下
把 &:after 控制三角形位置的 right 换成了 transform 然后问题就解决了

// tab 标签
      /deep/ .van-tab {
        position: relative;
        height: 19px;
        line-height: 20px;
        margin-left: 5px;
        margin-right: 5px;
        text-align: right;
        font-size: 0;

        /deep/ .van-ellipsis {
          color: #ffffff;
          font-size: 16px;
        }

        // 三角形
        &:after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          transform: translateX(9.5px);  // 改了这里
          border: 10px solid #ffffff;
          border-left-color: inherit;
          border-right: none;
          border-top-color: transparent;
          border-bottom-color: transparent;
        }

        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0px;
          border: 10px solid blue;
          border-left-color: #ffffff;
          border-right: none;
          border-top-color: transparent;
          border-bottom-color: transparent;
        }
      }

image