早上起床冲浪，看到周六凌晨一点多还在奋斗的佬发来的一条私信，询问类似谷歌浏览器页签样式该如何实现，这和准备摆烂的我形成强烈对比，一股强大的力量将我从床上拉起，准备整一下这个命题。 
[image] 
[image] 
一般而言，看到这种东西，首先想到的就是使用伪元素来拼接。 
思路一：伪元素拼接
将整体拆开，其实可以发现，就是一个中间的圆角矩形 + 两侧的弧形边角。 
中间的圆角矩形大家都会，加个border-radius 就OK了！难点就在于两侧的弧形边角。 
说到弧形，我们首先应该想到的是圆！那么我们是不是可以在一个圆中截取其中一部分呢？这么一想，是不是又打开了新世界~ 
我们需要的是某个部分为透明的，所以我们可以画一个空心圆，内部为透明，外层为填充色，这个实现方法很多，我们就以透明圆为例，画一个透明圆，然后加一个很大的边框！为了不影响尺寸和方便计算，我们就直接 使用box-shado...