<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
text-decoration: none;
color: black;
}
.breadcrumb{
display: inline-block;
overflow: hidden;
border-radius: 5px;
font-size: 1.1em;
text-align: center;
counter-reset: num;/*num可以随便取成其他名字代替，要与下文对应*/
}
.breadcrumb a {
/* border: 1px solid;*/
display: block;
line-height: 36px;
background-color: paleturquoise;
position: relative;
float: left;
padding: 10px 70px 10px 70px ;
}
/*实现导航的三角图形*/
.breadcrumb a:after {
content: "";
position: absolute;
z-index: 1;
top:10px;
right: -18px;/*让画出的正方形位于每个导航右边border的中间*/
width: 36px;
height: 36px;
background: paleturquoise;
transform: scale(1.15) rotate(45deg);/*让画出的正方形翻转45度，模拟出最后出现的三角效果*/
box-shadow:5px -5px 0 4px rgba(255, 255, 255, 1);
/*box-shadow: h-shadow v-shadow blur spread color inset;实现各个导航中间的白色效果
注意：x轴和y轴的值要比阴影的值大。
*/
}
.breadcrumb a:last-child:after {
content: none;
}
.breadcrumb a:hover, .breadcrumb a:hover:after{
background-color:skyblue;
}
/*实现导航前面的递增数字*/
.breadcrumb a:before {
content: counter(num);
counter-increment: num;
border-radius: 50%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 10px;
left: 48px;
background: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="breadcrumb">
<a href="#">home</a>
<a href="#">goods</a>
<a href="#">order</a>
<a href="#">more</a>
</div>
</body>
</html>
