首页 > 代码库 > 带三角的面包屑导航栏（方法二）

带三角的面包屑导航栏（方法二）

2024-09-15 18:58:34   215人阅读

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: gainsboro;
        }

        ul li {
           /* border-radius: 5px;  让边框变得圆润*/
            margin-left: 3px;/*实现子导航间的白色三角空白*/
            display: inline-block;
            width: 120px;
            line-height: 40px;
            position: relative;
            float: left;
            background: powderblue;
            color: whitesmoke;
            text-align: center;
        }

        /*before&after各自画一个三角*/
        ul li:after{
            content: "";
            display: block;
            border-top:20px solid transparent;
            border-bottom:20px solid transparent;
            border-left:20px solid powderblue;
            position: absolute;
            top: 0;
            right: -20px;
            z-index: 1;

        }

        ul li:before{
            content: "";
            display: block;
            border-top:20px solid powderblue;
            border-bottom:20px solid powderblue;
            border-left:20px solid white;
            position: absolute;
            top: 0;
        }

        /*去除头尾的三角*/
        ul li:first-child:before ,ul li:last-child:after{
            display: none;
        }
    </style>
</head>
<body>
<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>four</li>
</ul>
</body>
</html>


注意：
技术分享技术分享

 

 先给一个对象画三角，然后把颜色改变至对应颜色，接着复制多个模块，修饰下头尾即大功告成。





 
带三角的面包屑导航栏（方法二）






























        

            
                
                  
                
                

                    联系

                    我们