创建“导航面包屑”答案

【问题标题】：Create "navigation breadcrumb"创建“导航面包屑”
【发布时间】：2011-11-29 16:33:02
【问题描述】：

我想知道如何使用 CSS/CSS3 和 HTML 来获得它。如何做到这一点？

如您所见，我指出了 3 导航面包屑。

【问题讨论】：

您需要更多信息才能获得任何有用的回复。您是否已经有一种机制来跟踪用户访问过的链接？如果不是，您是在问这个问题还是只是在问如何设置面包屑显示的样式？
只是为了展示。有这样的“机制”吗？你知道吗？

【解决方案1】：

<!DOCTYPE html>
<html>

<head>

    <style type="text/css">
        html{
            background:#222;
            font-size:12px;
            font-family:Arial;
        }

        ul#breadcrumbs{         
            list-style:none;
            /* optional */
            margin:100px;
            padding:10px 2px 10px 10px;
            background:#000;
            width:295px;
            height:30px;
            border-radius:5px;
            border:1px solid #222;
            -moz-box-shadow:0 0 3px 0 #000;
        }
        ul#breadcrumbs li{
            float:left;
            background:#93ce68 url(bg.png)no-repeat right;
            height:30px;
            padding:0 23px 0 10px;
            text-align:center;
            text-decoration:none;
            color:#000;
            line-height:32px;
        }
        ul#breadcrumbs li.active{
            background:url(bg.png)no-repeat right;
            color:#000;
        }
        ul#breadcrumbs li a{
            display:block;
            text-decoration:none;
            color:#fff;
            line-height:32px;
            text-shadow:0 0 2px #222;
        }
        ul#breadcrumbs li a:hover{
            color:#a2ff00;
        }

    </style>

</head>

<body>

    <ul id="breadcrumbs">
        <li><a href="">Home</a></li>
        <li><a href="">Page1</a></li>
        <li><a href="">Page2</a></li>
        <li class="active">About Us</li>
    </ul>



</body>
</html>

将图像保存在 html 的根目录中，并使用 clearfix for ul 来清除 li 浮点值。如果您使用 CSS 边框技术，可能会在某些浏览器中呈现模糊的边框。希望它能解决您的疑问。

【讨论】：

【解决方案2】：

我自己就需要这个...我发现的只是包含大量 ::before 和 ::after 伪元素的示例。但我想尝试新的掩蔽技术。没找到，所以我自己破解了这个：

注意：这不是我做过的最漂亮的，但它具有使用clip-path 解决它所需的结构部分它是实验性的，所以不要指望它起作用。我只在 chrome 中测试过这个

帮助我做到这一点的一个很棒的工具是clippy
只需修改一些点 (x, y) 以从右侧进行数学计算 - 箭头的宽度>

/* Make the hole background black (since it's hard to simulate a border around the arrow head)*/
#breadcrumb {
  background: black;
  display: inline-block;
  padding: 1px;
  padding-right: 18px;
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

#breadcrumb a {
  display: inline-block;
  background: gray;
  padding: 5px 30px 5px 30px;
  position: relative;
  text-decoration: none;
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
  margin-right: -17px;
}

/* Just to show that even around the arrow head, the mouse pointer is at the correct link */ 
a:hover {
  color: red;
}

/* first link should not have anything cliped on the left side */
#breadcrumb a:first-child {
  -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  padding-left: 20px;
}

<nav id="breadcrumb">
  <a href="#1">Home</a>
  <a href="#2">Contact</a>
  <a href="#3">Some extra long name</a>
  <a href="#4">Email</a>
</nav>

【讨论】：