CSS3 巧妙实现双圆角 Tab 菜单

2023-09-02 22:12:09

各位好，今天我们来探讨一个颇具美感且实用的 CSS3 应用案例——双圆角 Tab 菜单。

效果预览

双圆角 Tab 菜单效果图

实现原理

这款双圆角 Tab 菜单本质上是由一个带有圆角的矩形加上两个左右对称的不规则图形（即去掉一个圆角的小矩形）组成的。巧妙利用伪元素 ::before 和 ::after 以及 box-shadow 阴影，我们便可轻松实现这一效果。

代码结构

顶部圆角实现

.tab {
  width: 100px;
  height: 50px;
  border-radius: 10px 10px 0 0;
  background-color: #ccc;
}

左右不规则图形实现

.tab::before,
.tab::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
}

.tab::before {
  left: 0;
  top: 0;
  border-radius: 10px 0 0 0;
  background-color: #fff;
}

.tab::after {
  right: 0;
  bottom: 0;
  border-radius: 0 10px 0 0;
  background-color: #fff;
}

阴影效果优化

.tab {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

添加阴影不仅可以增强视觉效果，还能有效地划分不同区域。

完整代码

<div class="tab">Tab</div>

.tab {
  width: 100px;
  height: 50px;
  border-radius: 10px 10px 0 0;
  background-color: #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.tab::before,
.tab::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #fff;
}

.tab::before {
  left: 0;
  top: 0;
  border-radius: 10px 0 0 0;
}

.tab::after {
  right: 0;
  bottom: 0;
  border-radius: 0 10px 0 0;
}