likes
comments
collection
share

CSS 竖版圆角阴影页签栏

作者站长头像
站长
· 阅读数 14

目标

使用纯css实现一个带有圆角阴影的页签效果，上一个页签覆盖下一个页签，激活的页签视觉上处于最高位。

主要思路

  1. 主要内容使用flex布局实现左边竖版页签栏，右边内容区域。

  2. 页签的文字排版采用的是 竖向文字排版，用到了css3的writing-mode特性。

    这里只讨论常规左对齐文本语言（ltr，例如中文和大多数其他语言）。

    值效果
    horizontal-tb从左到右排列
    vertical-rl从上到下排列，下一行在右边
    vertical-lr从上到下排列，下一行在左边

  3. 页签使用div伪造实现，方便样式修改，超出的内容隐藏。

  4. 页签上下带弧度的部分使用伪元素实现，由于当前页签与上一个页签有个覆盖效果，所以基础页签样式只需要使用::after伪元素实现底部覆盖效果即可。

  5. 激活页签的上下两个部分都有覆盖效果，所以单独设置两个伪元素::beforeg和::after，并且需要把层级调到最高，实现覆盖。

  6. 边缘边界效果使用box-shadow实现。

踩坑

一开始想要使用伪元素的border效果，来实现页签边缘边界效果，由于页签的弧度区域是使用的伪元素的box-shadow效果实现的，所以伪元素的位置以及border边框和期望的位置大相径庭。折磨了2个小时放弃了。

效果图

CSS 竖版圆角阴影页签栏

源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tab菜单演示</title>

</head>

<style>
    * {
        margin: 0;
        padding: 0;
        font-weight: bolder;
        background: #f5f6f6;
    }

    .tabs-containt {
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        padding-top: 20px;
    }

    .tabs-item {
        width: 40px;
        height: 120px;
        margin: -10px 0 0 10px;
        background: #eeeeee;
        border-radius: 20px 0 0 20px;
        writing-mode: vertical-lr;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        box-shadow: 0px 0px 19px 1px #7d7d7d;
    }

    .tabs-item::after {
        content: '';
        width: 38px;
        height: 38px;
        position: absolute;
        right: 0;
        top: 120px;
        border-radius: 50%;
        box-shadow: 15px -15px 0px #eee;
        z-index: 1;
    }

    .tabs-item-active{
        background: #fff;
        z-index: 99 !important;
    }

    .tabs-item-active::before {
        content: '';
        width: 38px;
        height: 38px;
        position: absolute;
        right: 0;
        top: -38px;
        border-radius: 50%;
        box-shadow: 15px 15px 0px #fff;
        z-index: 1;
    }

    .tabs-item-active::after {
        content: '';
        width: 38px;
        height: 38px;
        position: absolute;
        right: 0;
        top: 120px;
        border-radius: 50%;
        box-shadow: 15px -15px 0px #fff;
        z-index: 1;
    }
    
    .page-body {
        display: flex;
        width: 100vw;
        height: 100vh;
    }

    .main-containt {
        width: 100%;
        height: 100%;
        background: #444;
        color: #fff;
    }
</style>

<body>
    <div class="page-body">
        <div class="tabs-containt">
            <div class="tabs-item" style="z-index: 5;">页签</div>
            <div class="tabs-item tabs-item-active" style="z-index: 4;">页签</div>
            <div class="tabs-item " style="z-index: 3;" >页签</div>
            <div class="tabs-item" style="z-index: 2;">页签</div>
            <div class="tabs-item" style="z-index: 1;">页签</div>
        </div>
        <div class="main-containt">
            我是主要内容区域
        </div>
    </div>

</body>

</html>

参考链接