纯css实现倾斜tab切换，并且加上两边圆角

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

 前端开发过程中难免会遇到倾斜的tab设计，并且两边要做成圆角效果，如下图：

​

我的想法：

    1. 给每个tab项设置transform：skew(角度值)实现倾斜效果，但是，此时里边内容也会跟着倾斜，所以给内容单独加一个容器，给该容器重新设置偏转回去即可；

    2. 两边的圆角，在tab项外边套一个div，给这个div设置border-radius，但是，因为此时这个父容器是被tab项撑开的，但是tab项左右两边是倾斜的，出现如下效果：

  ​  

需要想办法把tab项的尖角去掉，怎么去掉呢？没错，overflow：hiddden；所以给父容器（content）加上，因为两边都需要盖住尖角（上图左上角和右下角），那么父容器的宽度就需要比tab项的宽度稍微少那么点，但是也不能少太多，不然圆角会有瑕疵，正好遮住最好（数值自行测试）,并且需要把tab项整体（此时需要给tab再加一层父容器content-nav，在上文的父容器content之内）往左移动一点，正好显示出来为好。

项目代码：

HTML:

<div class="content">
  <div class="content-nav">
    <div class="item">
      <div class="item-word">测试tab111</div>
    </div>
    <div class="item">
      <div class="item-word">测试tab222</div>
    </div>
    <div class="item">
      <div class="item-word">测试tab333</div>
    </div>
  </div>
</div>

CSS:

.content {
  width: 550px;
  background: #f00;
  white-space: nowrap;
  border-radius: 15px;
  overflow: hidden;
}

.content-nav {
  margin-left: -33px;
}

.item {
  width: 200px;
  height: 30px;
  display: inline-block;
  font-size: 24px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(90deg, rgba(255, 163, 0, 1) 0%, rgba(249, 214, 45, 1) 100%);
  transform: skew(30deg);
}

.item-word {
  transform: skew(-30deg);
}

如此这般，这般如此，就可以实现本文最开始的效果啦。