前端 - 请问css怎么实现这样直角梯形的tab按钮？

Question

类似于这种 tab按钮切换卡

Answer 1

首先你要先实现两个梯形的效果，然后再通过margin负值，或者translateX或者left改变元素的位置。

为了实现层叠效果，所以，position:relative;或者position:absolute还是需要有的，同时在激活的那个 tab 上，要把 z-index 值加大。

以上是基本的思路，至于实现梯形的图形，可以直接使用这个工具：https://csstrick.alipay.com/trick/trapezoidal

细看了一下你的设计稿，梯形带有圆角效果，如果你对于 CSS 的渐变掌握不深的话，可以考虑直接使用图片来实现，简单快捷。