正文

CSS3实现双圆角Tab菜单

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0903

效果图

image.png

分析

一个带圆角的矩形 + 左右对称的不规则图形（一个小矩形分别去掉一个圆角），利用伪元素 ::before ::after 和 box-shadow 阴影实现。

image.png

image.png

image.png

image.png

代码结构

<div class="tab-box">
    <div class="tab-item">TAB 1</div>
    <div class="tab-item active">TAB 2</div>
    <div class="tab-item">TAB 3</div>
    <div class="tab-item">TAB 4</div>
</div>
* {
    margin: 0;
    padding: 0;
}
.tab-box {
    display: flex;
    align-items: center;
    background: #e44f26;
}
.tab-box .tab-item {
    position: relative;
    flex: 1;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #e44f26;
}
.tab-box .active {
    background: #fff;
    color: #333;
    z-index: 1;
}

image.png

1. 顶部圆角实现

.tab-box .active {
    border-radius: 20px 20px 0 0;
}

image.png

2. 底部外圆角实现(借助 CSS3 伪元素)

.tab-box .active::before {
    content: "";
    position: absolute;
    left: -21px;
    bottom: 0;
    width: 21px;
    height: 50px;
    background: #e44f26;
    border-radius: 0 0 20px 0;
}
.tab-box .active::after {
    content: "";
    position: absolute;
    right: -21px;
    bottom: 0;
    width: 21px;
    height: 50px;
    background: #e44f26;
    border-radius: 0 0 0 20px;
}

image.png

3. 使用 box-shadow 覆盖外圆角没有覆盖的区域

.tab-box .active {
    box-shadow: 20px 20px 0 0 blue, -20px 20px 0 0 blue;
}

image.png

将蓝色改回白色，左右外圆角底色改成橙色

image.png

.tab-box .active::before {
    background: #e44f26;
}
.tab-box .active::after {
    background: #e44f26;
}

image.png

到此这篇关于CSS3实现双圆角Tab菜单的文章就介绍到这了,希望大家以后多多支持米米素材网！