css 斜切tabs

需求：实现一个斜切的tabs

• 利用css linear-gradient 实现

  <div class="content-nav">
    <div class="item item1">测试tab1</div>
    <div class="item item2">测试tab2</div>
  </div>

.content-nav {
  display: flex;
  width: 100%;
}
.item {
  flex: 1;
  padding: 5px 0;
  text-align: center;
}
.item1 {
  /* 设置之后需要把位置向相反的方向偏移，达到粘合 */
  /* 29.5px 两种颜色直接贴合过渡会产生锯齿效果，保留一个极小（1.5px）的渐变过渡空间 可以优化锯齿*/
  margin-right: -30px;
  background: linear-gradient(-120deg, transparent 29.5px, red 31px);
}
.item2 {
  margin-left: -30px;
  background: linear-gradient(60deg, transparent 29.5px, #e1e1e1 31px);
}

• 优化前，拼接处有明显的渐变锯齿

• 优化后

那么为啥会产生锯齿感呢？

传统网页的呈现是基于像素单位的，对于这种一种颜色直接过渡另外一种颜色状态的图片，容易导致可视质量下降（信息失真）。因而对于普通的渐变元素，像是上述写法，产生了锯齿，这是非常常见的在使用渐变过程中的一个棘手问题。 这里最简单的方式就是不要直接过渡，保留一个极小的渐变过渡空间。