去年底的时候接到个需求，需要实现一个圆角的 tab，看到这个效果刚开始我感觉挺简单的，不就来几个圆角吗？思考了一段时间发现不对劲，事情没我想的那么简单！！！
解决方案
1. 使用切图
UI 给我这么一个不规则的图案，想着前端最简单的解决办法：
UI 给我切个图。但是使用背景图可能会出现切换时不流畅，背景图需要加载，而且最边上的 tab 选中的时候还需要给他填充一个选中的颜色；并且使用背景图如果到时候 tab 增加或者减少也需要相应的去换背景图，否则图片尺寸会拉升，就先不考虑这个方法了。
2. 使用 css 实现
话不多说，先上普通版的效果：
看起来效果不错，我们给梯形加上别的颜色就能明白是怎么实现的了。
分析
- 选中的效果可以拆分成三个形状来拼接
- 左边一个梯形，中间一个长方形，右边也一个梯形
- 两端选中状态边上不需要梯形
- 实现梯形只需要用到
transform: skew(-17deg);，角度自己调，将元素进行斜切变形成一个梯形，并且给上面加上圆角效果
有点瑕疵
看着这个 tab 好像还行，但是对照设计稿细看，下面也有一个圆角，使这个选中的梯形状态更圆润，但是这个该怎么实现呢？
这个圆角是朝向未选中 tab，所以在未选中 tab 那边也需要放一个类似的小梯形来实现这个这样的圆角幅度；效果类似下面这样，但是还需要填充两个梯形之间的缝隙为选中颜色，当时想着是在选中状态下再加个 dom 定位到底下（before、after 都用完了），但是我这个人有点强迫症，不太想再新增一个 dom，就没有实现底下圆角效果。设计师也没说什么，就这样完事了。
期间实现查阅的资料发现 chrome 浏览器的 tab 效果其实类似，但是 chrome tab 没有倾斜变形，有点不符合我现在这个需求，也找到了 chrome tab 的实现效果。
后续
没想到时隔几个月，又出来一个这个 tab 的需求！
强迫症的我就想着能不能优化下之前的 tab，使其圆润一点，网上查了下资料，发现已经有人实现了。 实现tabs圆角及反圆角效果（PLUS）可以看看这篇文章，看了下效果，和我的思路基本一样，但是选中和未选中的两个梯形填充了颜色，看了下他是通过 box-shadow 填充的，不需要新增 dom 去操作，完美。
优化后最终效果
3.1 使用 clip-path path 函数实现
这是在网上找到的方案，不太理解原理，附上地址 jsrun.net/JHFKp
题外话
实现这个需求的梯形效果需要使用多个内容拼接而成，这让我想起了第一次来深圳面试的时候，让我用 css 实现一个八卦图，哈哈哈，在那个地方写了一下午，结果面试还没过，而且是用笔写样式😓
