效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab 示例</title>
<style>
/* 定义 CSS 变量 */
:root {
--tab-width: 200px;
--tab-height: 50px;
--tab-radius: 10px;
--tab-bg: #EFF6FF;
--tab-active-bg: gold;
--tab-corner-size: 10px;
}
/* 基础样式 */
.box {
padding: 50px 300px;
text-align: center;
display: flex;
}
/* Tab 通用样式 */
.tab {
width: var(--tab-width);
height: var(--tab-height);
background-color: var(--tab-bg);
position: relative;
border-radius: var(--tab-radius) var(--tab-radius) 0 0;
transform-origin: center bottom;
transform: perspective(10px) rotateX(10deg);
cursor: pointer; /* 添加鼠标指针样式 */
}
/* Tab 伪元素样式 */
.tab::before,
.tab::after {
content: "";
position: absolute;
bottom: 0;
width: var(--tab-corner-size);
height: var(--tab-corner-size);
background: var(--tab-bg);
}
.tab::before {
left: calc(-1 * var(--tab-corner-size));
background: radial-gradient(circle at 0 0, transparent var(--tab-corner-size), var(--tab-bg) var(--tab-corner-size));
}
.tab::after {
right: calc(-1 * var(--tab-corner-size));
background: radial-gradient(circle at var(--tab-corner-size) 0, transparent var(--tab-corner-size), var(--tab-bg) var(--tab-corner-size));
}
/* 第二个 Tab 的特殊样式 */
.tab2 {
top: -26px;
margin-left: -50px;
transform: perspective(10px) rotateX(170deg);
}
/* 激活状态的 Tab 样式 */
.active {
background-color: var(--tab-active-bg);
}
.active::before {
background: radial-gradient(circle at 0 0, transparent var(--tab-corner-size), var(--tab-active-bg) var(--tab-corner-size));
}
.active::after {
background: radial-gradient(circle at var(--tab-corner-size) 0, transparent var(--tab-corner-size), var(--tab-active-bg) var(--tab-corner-size));
}
</style>
</head>
<body>
<div class="box">
<div class="tab tab1 active"></div>
<div class="tab tab2"></div>
</div>
<script>
const tabs = document.querySelectorAll(".tab");
tabs.forEach((tab) => {
tab.addEventListener("click", () => {
tabs.forEach((t) => t.classList.remove("active"));
tab.classList.add("active");
});
});
</script>
</body>
</html>