<!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来清除li浮动值。如果使用CSS边框技术,在某些浏览器中可能会导致边框模糊。 希望这能解决您的问题。
我自己也需要这个...我找到的都是很多::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>