效果图
分析
一个带圆角的矩形 + 左右对称的不规则图形（一个小矩形分别去掉一个圆角），利用伪元素 ::before ::after 和 box-shadow 阴影实现。
代码结构
|
1
2
3
4
5
6
|
<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>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
* {
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;
}
|
1. 顶部圆角实现
|
1
2
3
|
.tab-box .active {
border-radius: 20px 20px 0 0;
}
|
2. 底部外圆角实现(借助 CSS3 伪元素)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.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;
}
|
3. 使用 box-shadow 覆盖外圆角没有覆盖的区域
|
1
2
3
|
.tab-box .active {
box-shadow: 20px 20px 0 0 blue, -20px 20px 0 0 blue;
}
|
将蓝色改回白色，左右外圆角底色改成橙色
|
1
2
3
4
5
6
|
.tab-box .active::before {
background: #e44f26;
}
.tab-box .active::after {
background: #e44f26;
}
|
|
