请教一下这类tab样式实现思路

Question

如下图：

切换：

请教一下此类效果的实现思路，怎样更优雅

Answer 1

这个是胶囊样式啊。
用css3里面的圆角属性做： border-radius

胶囊的制作： 值为大于等于短边的一半即可，一半以上也不会有变化

div {
        width: 300px;
        height: 100px;
        background-color: palevioletred;
        border-radius: 50px;
    }

效果：

Answer 2

伪元素画半圆吧

Answer 3

定位+z-index

Answer 4

题主问的是怎么实现堆叠的问题，推荐三楼的定位+z-index用js去控制

Answer 5

最外层一个div，显示border，border-radius，然后里面的tab谁active谁就显示一个bgcolor，border-radius跟着父级走就可以