新闻中心News
建站知识

利用css样式做弧形边框选项卡

作者:来源:访问:821时间:2024-10-27

实现方法

首先设置一个 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    );}

作者:猪猪行天下
来源:简书
Go To Top 回顶部