如何实现Chrome浏览器标签栏的效果?

Question

如图所示，使用HTML，CSS，js这个效果如何实现？

Answer 1

可以参考这个问题所采纳的 @ゆきにゃ 的答案：border、outline、boxshadow那些事以及如何做内凹圆。
我一开始回答过上述问题，所给建议是使用 css3 的 clip-path 结合的方式来实现，但是没直接给出符合伸手党要求的答案而被踩，遂删之。

Answer 2

我这有个障眼法.. 当前标签页左上 右上 圆角 其他标签 左下右下圆角 其他标签页 灰色背景 当前白色 然后他们的父div灰色背景 然后父元素相对定位 给一个padding 然后after或before绝对定位到底部 白色背景 after或before z-index 1 标签的z-index 2 完成- -

Answer 3

设置前一页和下一页class，设置自己边框 border-radius: 5px 5px 0 0;上一个 border-radius: 0 0 5px 0; 下一个border-radius: 0 0 0 5px