实现方法
首先设置一个 div
,class设置为tab
,并设置上面的圆角。
.tab { width: 150px; height: 40px; margin: 0 auto; background: #ed6a5e; border-radius: 10px 10px 0 0;}
然后我们要想一个办法在两边的底部拼接一个弧形。我们可以通过伪元素来实现。
伪元素这两个子元素使用绝对定位,父元素需要设置相对定位,左右底部各设置一个子元素。
.tab { width: 150px; height: 40px; margin: 0 auto; background: #ed6a5e; border-radius: 10px 10px 0 0; position: relative; } .tab::before, .tab::after { content: ''; position: absolute; width: 10px; height: 10px; bottom: 0; background: #000; } .tab::before { left: -10px; } .tab::after { right: -10px; }
展示效果如下图:
如何把左右的元素做成一个弧形的效果呢,我们可以使用渐变。使用径向的渐变
radial-gradient
,修改下面样式代码:.tab::before { left: -10px;}
修改成:
.tab::before { left: -10px; background: radial-gradient(blue, red);}
可以在界面上看到左侧的子元素中心点是blue
颜色,然后向四周扩散为red
颜色。我们设置修改渐变的中心点的位置,将中心点设置在左上角额位置,设置如下:
.tab::before { left: -10px; background: radial-gradient(circle at 0 0, blue, red);}
现在呢,渐变就是从左上角开始,从blue
变到red
, 我们修改颜色从透明到父元素背景色。
.tab::before { left: -10px; background: radial-gradient(circle at 0 0, transparent, #ed6a5e);}
接下来设置渐变的位置,从最开始一直变到10px
,另一个颜色也是10px
开始:
.tab::before { left: -10px; background: radial-gradient(circle at 0 0, transparent 10px, #ed6a5e 10px);}
此时,弧形圆角已经显示出来了,它从左上角为中心画圆,10px
范围都是透明,从10px
开始则是背景颜色,所以就出现了这么个弧形效果。
同理右边额元素也设置一个,唯一的不同是圆心不一样,圆心在100%右上方的位置:
.tab::after { right: -10px; background: radial-gradient( circle at 100% 0, transparent 10px, #ed6a5e 10px );}

这看起来还和我们的效果有些差异。接下来我们就可以使用一个旋转的效果来处理这个差异,我们来旋转整个元素,给它设置一个transform:rotateX(20deg)
,从0开始沿着x轴旋转,仅这样旋转是没有立体效果的,我们给它加一个perspective
景深,这样旋转有那么点意思了。
但是这个旋转是沿着整个元素的中心来进行旋转的,也就是沿着元素高的一半的位置的x轴旋转的。我们希望它沿着元素的底部进行旋转,这里就需要设置旋转原点origin
,设置为``transform-origin: center bottom;`。
完整代码如下:
.tab { width: 150px; height: 40px; margin: 20px auto; background: #ed6a5e; border-radius: 10px 10px 0 0; position: relative; /* 添加旋转和景深 */ transform: perspective(30px) rotateX(20deg); transform-origin: center bottom;}.tab::before, .tab::after { content: ''; position: absolute; width: 10px; height: 10px; bottom: 0; background: #000;}.tab::before { left: -10px; background: radial-gradient( circle at 0 0, transparent 10px, #ed6a5e 10px );}.tab::after { right: -10px; background: radial-gradient( circle at 100% 0, transparent 10px, #ed6a5e 10px );}