帶三角的面包屑導航欄（方法二） - iriliguo－IT工程師數位筆記本

文章出處

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


注意：