纯CSS实现面包屑式导航

参考别人的教程，模仿了一下，效果图：

 

html:

   <div id="crumbs">
        <ul>
                <li><a href="#">Breadcrumb</a></li>
        </ul>
</div> 

 

css:

#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;
}
    #crumbs ul li a:after{
        border-top: 40px solid transparent;
        border-left: 40px solid #3498db;
        border-bottom: 40px solid transparent;
        content: '';
        position: absolute; right: -40px; top: 0;
    }
     #crumbs ul li a:before{
        border-top: 40px solid #3498db;
        border-left: 40px solid transparent;
        border-bottom: 40px solid #3498db;
        content: '';
        position: absolute; right: 180px; top: 0;
    }

 

注：即使content无设置任何字符，也需要写出content为空的情况，否则显示不出来