纯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为空的情况，否则显示不出来