.step-menu {
    list-style-type: none;
}

    .step-menu li {
        box-sizing: border-box;
        float: right;
        background: #ddd;
        height: 50px;
        text-align: center;
        padding: 15px 50px 15px 15px;
        position: relative;
        margin-right: 10px
    }

        .step-menu li:before {
            content: '';
            position: absolute;
            border: 25px solid transparent;
            border-right-color: white;
            top: 0px;
            left: -59px;
        }

        .step-menu li:after {
            content: '';
            position: absolute;
            border: 25px solid transparent;
            border-right-color: #ddd;
            top: 0px;
            left: -49px;
        }

        .step-menu li:nth-child(1) {
            z-index: 600;
            margin-right: 0;
            padding-right: 5px
        }

        .step-menu li:nth-child(2) {
            z-index: 500;
        }

        .step-menu li:nth-child(3) {
            z-index: 400;
        }

        .step-menu li:nth-child(4) {
            z-index: 300;
        }

        .step-menu li:nth-child(5) {
            z-index: 200;
        }

        .step-menu li:nth-child(6) {
            z-index: 100;
            padding-left: 5px
        }

            .step-menu li:nth-child(6):after,
            .step-menu li:nth-child(6):before {
                border: none
            }

        .step-menu li.current {
            background: darkgreen;
            color: white;
        }

            .step-menu li.current:after {
                border-right-color: darkgreen;
            }

        .step-menu li.complete {
            background: gray;
            color: white;
        }

            .step-menu li.complete:after {
                border-right-color: gray;
            }