css tab切换样式

Question

想得到上面的效果

a{width: 100px;height: 40px;background: red;position: absolute;top: 50%;left: 50%;margin: 200px 0 0 -50px;

border-radius: 10px 10px 0 0;

}

a:before,a:after{

content: "";
border-top: 32px solid transparent;
position: absolute;
top: 8px;

}
a:before{

border-right: 15px solid red;
left: -15px;

}
a:after{

border-left: 15px solid red;
right: -15px;

}

我用伪类可以做成斜边

但是周边的阴影不知道怎么出来 用box-shadow的话伪类上不会加阴影

有什么方法和上面的做成一样

Answer 1

又到了我最喜欢的 css 开脑洞环节

1.如果非要用伪类的话
那问题就是阴影不匹配嘛，那其实可以用 filter: drop-shadow 而不是 box-shadow
或者是暴力一点直接切个阴影的 png 图片 absolute 到最后也行

2.如果不用伪类
那简单了，transform: skew/matrix 都可以把背景和阴影一起都给变成梯形或者平行四边形，但是文字内容会跟着 transform，这里注意一下分两层就行了

如有帮助请 upvote 或采纳