效果：
代码：
<!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>
