css横向流程条

2.png

style部分

<style type="text/css">
    #crumbs {
        text-align: center;
    }
    
    #crumbs ul {
        list-style: none;
        display: inline-table;
    }
    
    #crumbs ul li {
        display: inline;
    }
    
    #crumbs ul li a {
        display: block;
        float: left;
        height: 50px;
        background: #3498db;
        text-align: center;
        padding: 30px 10px 0 60px;
        position: relative;
        margin: 0 10px 0 0;
        font-size: 20px;
        text-decoration: none;
        color: #fff;
    }
    
    #crumbs ul li a:after {
        content: "";
        border-top: 40px solid transparent;
        border-bottom: 40px solid transparent;
        border-left: 40px solid #3498db;
        position: absolute;
        right: -40px;
        top: 0;
        z-index: 1;
    }
    
    #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;
    }
    
    #crumbs ul li:first-child a {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        padding-left: 50px;
        padding-right: 20px;
    }
    
    #crumbs ul li:first-child a:before {
        display: none;
    }
    
    #crumbs ul li:last-child a {
        padding-right: 20px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    
    #crumbs ul li:last-child a:after {
        display: none;
    }
    
    #crumbs ul li a:hover {
        background: #fa5ba5;
    }
    
    #crumbs ul li a:hover:after {
        border-left-color: #fa5ba5;
    }
</style>

html部分

<div id="crumbs">
    <ul>
        <li>
            <a href="#1">One</a>
        </li>
        <li>
            <a href="#2">Two</a>
        </li>
        <li>
            <a href="#3">Three</a>
        </li>
    </ul>
</div>