当前位置：首页 > news >正文

css梯形tab

news 来源：原创 2025/6/19 0:35:28

效果：

代码：

<!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>