写一个箭头导航栏_css 箭头导航条-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_25972233/article/details/136693900

这篇文章详细描述了如何使用HTML和CSS（特别是Flexbox布局）创建一个带有动态箭头指示的导航菜单，展示了不同菜单项的样式和箭头定位方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>Document</title>
    <style>
        .box {
            display: flex;


        }

        .box-item {
            width: 200px;
            height: 30px;
            line-height: 30px;
            background-color: #E8EBEF;
            margin-left: 40px;
            text-align: center;
            position: relative;
        }



        .box-item::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -15px;
            /* 通过调整值来控制箭头位置 */
            border-top: 15px solid transparent;
            border-left: 10px solid #E8EBEF;
            border-bottom: 15px solid transparent;
            /* 替换为你想要的箭头颜色 */
        }

        .box-item:not(:first-child)::after {
            /* 在这里添加你想要应用的样式 */
            /* 修改文字颜色示例 */
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -15px;
            /* 通过调整值来控制箭头位置 */
            border-top: 15px solid transparent;
            border-left: 10px solid #FFF;
            border-bottom: 15px solid transparent;
            /* 替换为你想要的箭头颜色 */
        }

        .box-item:nth-child(2) {
            background-color: #1565C0;
            color: #FFF;
        }

        .box-item:nth-child(2):before {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -15px;
            /* 通过调整值来控制箭头位置 */
            border-top: 15px solid transparent;
            border-left: 10px solid #1565C0;
            border-bottom: 15px solid transparent;
            /* 替换为你想要的箭头颜色 */
        }

        .box-item:nth-child(3) {
            background-image: linear-gradient(to right, #96D652, #000);
            color: #FFF;
        }

        .box-item:nth-child(3):before {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -15px;
            /* 通过调整值来控制箭头位置 */
            border-top: 15px solid transparent;
            border-left: 10px solid #000;
            border-bottom: 15px solid transparent;
            /* 替换为你想要的箭头颜色 */
        }

        .box-item:nth-child(4) {
            background-color: #FFF3E0;
            background-image: linear-gradient(to right, #0178CD, #000);
            color: #fff;
        }

        .box-item:nth-child(4):before {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -15px;
            /* 通过调整值来控制箭头位置 */
            border-top: 15px solid transparent;
            border-left: 10px solid #000;
            border-bottom: 15px solid transparent;
            /* 替换为你想要的箭头颜色 */
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="box-item">管理员</div>
        <div class="box-item">维护公司</div>
        <div class="box-item">添加用户</div>
        <div class="box-item">维护权限</div>
    </div>

</body>

</html>

写一个箭头导航栏

最终效果