css弧形边框选项卡

preview.png

如何实现

首先设置一个 div,class设置为tab,并设置上面的圆角。

<div class="tab"></div>
.tab {
    width: 150px;
    height: 40px;
    margin: 0 auto;
    background: #ed6a5e;
    border-radius: 10px 10px 0 0;
}

然后我们要想一个办法在两边的底部拼接一个弧形。我们可以通过伪元素来实现。
伪元素这两个子元素使用绝对定位，父元素需要设置相对定位，左右底部各设置一个子元素。

<div class="tab"></div>
.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;
}

展示效果如下图：

start.png

如何把左右的元素做成一个弧形的效果呢，我们可以使用渐变。使用径向的渐变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
    );
}

pre.png

这看起来还和我们的效果有些差异。接下来我们就可以使用一个旋转的效果来处理这个差异，我们来旋转整个元素，给它设置一个transform:rotateX(20deg),从0开始沿着x轴旋转，仅这样旋转是没有立体效果的，我们给它加一个perspective景深，这样旋转有那么点意思了。

但是这个旋转是沿着整个元素的中心来进行旋转的，也就是沿着元素高的一半的位置的x轴旋转的。我们希望它沿着元素的底部进行旋转，这里就需要设置旋转原点origin,设置为``transform-origin: center bottom;`。

end.png

完整代码如下:

 .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
    );
}