Html 创建“导航面包屑”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8314261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create "navigation breadcrumb"
提问by oliverbj
I am wondering how I am able to obtain this with CSS/CSS3 and HTML. How can this be done?
我想知道如何使用 CSS/CSS3 和 HTML 获得它。如何才能做到这一点？
As you can see, I pointed out the 3 navigation breadcrumb.
如您所见，我指出了 3 个导航面包屑。
采纳答案by Code Lover
<!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>
Save image in root of html and use clearfix for ul to clearing li float value. if you use CSS border technique, that may render blurry border in some browser. Hope it will solve your query.
将图像保存在 html 的根目录中，并使用 clearfix for ul 来清除 li 浮点值。如果您使用 CSS 边框技术，可能会在某些浏览器中呈现模糊的边框。希望它能解决您的疑问。
回答by Endless
Just needed this myself... All i found was examples with lots of ::before& ::afterpseudo elements. But I wanted to try out the new masking technic. Didn't find any, So I hacked together this myself:
我自己只需要这个...我发现的只是包含大量::before&::after伪元素的示例。但我想尝试新的遮蔽技术。没有找到，所以我自己动手了：
Note:It's not the prettiest one that I have done, But it has the structural part needed to solve it using clip-pathIt's experimental so don't count for this to work. I have only tested this in chrome
注意：这不是我做过的最漂亮的，但它具有使用剪辑路径解决它所需的结构部分它是实验性的，所以不要指望它起作用。我只在 chrome 中测试过这个
A awesome tool that helped me make this was clippy
Just had to modify some points (x, y) to be mathematically calculated from the right side - the width of the arrow head >
帮助我做到这一点的一个很棒的工具很简单
只需要修改一些点 (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>