html是l面包屑效果,纯CSS实现面包屑式导航_html/css_WEB-ITnose

参照着教程做了一个面包屑式的导航。在这里分享一下实现方式，自己也在温习一下。首先效果如图：

HTML代码如下： #crumbs ul li a {display: block;float: left;height: 50px;background: #3498db;text-align: center;padding: 30px 40px 0 40px;position: relative;margin: 0 10px 0 0; font-size: 20px;text-decoration: none;color: #fff;}

使用：after选择器创建一个元素。使用css边框来生成一个三角形。给使用：after选择器生成的元素应用上下边框，左边框，然后把上下边框的颜色设置成透明的。在将该元素放置到合适的地方(通过position:absolute)，注意设置z-index #crumbs ul li a:after {content: ""; border-top: 40px solid red;border-bottom: 40px solid red;border-left: 40px solid blue;position: absolute; right: -40px; top: 0; z-index:5;}

设置上下边框为透明，重新设置左边框的颜色后 border-top: 40px solid transparent;border-bottom: 40px solid transparent;border-left: 40px solid #3498db;

使用同样的方法，在矩形框的左边渲染一个三角形样式。这一次还是设置：before元素的上下边框为透明，设置左边框的颜色和页面的背景色一致，伪装成页面的一部分 #crumbs ul li a:before {content: ""; border-top: 40px solid transparent;border-bottom: 40px solid transparent;border-left: 40px solid #d4f2ff;position: absolute; left: 0; top: 0;}