<!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的中间*/ 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%; 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>