三角形，斜线，表头css实现方法

三角形可通过border来实现，斜线可用transform:rotate(9deg)

border可用来画三角形，主要是因为，长方形，四边的border可以单独设置颜色和粗细，border:1px solid #000
且border在content盒模型是不占宽高，当该长方形的宽高设置为0时，就剩下了border，就得到了三角形，其他的设成透明，就得到单个三角形

.border {
    width: 0;
    height: 0;
    border-style:solid;
    // 上面的border为0，下面的border为三角形的颜色
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
}

如果想得到空心的，再用伪类元素定位个透明的三角形上去

.border:after {
    content: '';
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #fff;
    // 定位
    position: absolute;
    top: 6px;
    left: -40px;
}

表头如果有两色块用双三角形+position

 <th class="th-header"> 
  <div class="th-slash">
       <span class="th-content1">时间</span>
       <span class="th-content2">员工</span>
     </div>
</th>
.th-header{
  width:78px;
  height: 57px;
  // background: $t-b;
  // border:1px solid $br-m;
  .th-slash{
    border-top: 57px #D6D3D6 solid;
      /*上边框宽度等于表格第一行行高*/
      width: 0px;
      /*让容器宽度为0*/
      height: 0px;
      /*让容器高度为0*/
      border-left: 78px #BDBABD solid;
      /*左边框宽度等于表格第一行第一格宽度*/
      position: relative;
    .th-content1{
      position: absolute;
      bottom: 10px;
      left: -70px;
    }
    .th-content2{
      position: absolute;
      bottom: 30px;
      left: -34px;
    }
  }
}

表头如果有单色块用双tranform+position

<th class="th-header"> 
    <div class="th-slash" />
    <span class="th-content1">时间</span>
      <span class="th-content2">员工</span>
  </th>
.th-header{
  width:78px;
  height: 57px;
  position: relative;
  background: $t-b;
  border:1px solid $br-m;
  border-bottom: 2px solid $br-m;
  .th-slash{ 
    width: 1px;
    height: 92px;
    background: #e7e7e7;
    transform-origin: 0 0;
    transform: rotate(-54deg);
  }
  .th-content1{
      position: absolute;
      bottom: 10px;
      left: 6px;
      color:#bbbbbb;
    }
    .th-content2{
      position: absolute;
      bottom: 30px;
      right: 6px;
      color: #bbbbbb;
    }
}

参考：https://blog.csdn.net/weixin_44475093/article/details/116036349