css wizard progress

Demo illustrating CSS arrow stylings for showing progression to the user

by Bhavik Bamania

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">

<div class="container">

  
    <div class="container">
        <div class="wizard row">
            <a href="#" class="text-center current">
                1.Identification
            </a>
            <a href="#" class="text-center">
                2.User Details
            </a>
            <a href="#" class="text-center">
                3.Questionnaire
            </a>
        </div>
</div>

CSS

/* wizard with arrows */
.nomargin {
    padding: 0 !important;
    margin: 0 !important;
}

.wizard {
    background-color: white;
    padding: 0.2em 0em 0.2em 0.2em;
}

    .wizard a {
        padding: 20px 12px 20px;
        position: relative;
        display: inline-block;
        text-decoration: none;
        min-width: 24.75%;
        margin-left: 10px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        color: #FFFFFF;
        background: #1A1A1A;
        cursor: pointer;
    }

        .wizard a:hover {
            text-decoration: none;
        }

        .wizard a:first-child {
            margin-left: 0;
        }

    .wizard a:before {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-left: 30px solid #FFFFFF;
        position: absolute;
        content: "";
        top: 0;
        left: 0;
    }


    .wizard a:after {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-left: 30px solid #1A1A1A;
        position: absolute;
        content: "";
        top: 0;
        right: -30px;
        z-index: 2;
    }
.wizard a.current:after {
        width: 0;
        height: 0;
        border-top: 30px inset transparent;
        border-bottom: 30px inset transparent;
        border-left: 30px solid #F7921E;
        position: absolute;
        content: "";
        top: 0;
        right: -30px;
        z-index: 2;
    }

    

    .wizard a:first-child:before,
    .wizard a:last-child {
        border: none;
    }

 
	.wizard a:last-child:not(.current) {
        /*May want another class and the :before rather than using last-child.*/
        background-color: #1A1A1A;
    }
    .wizard a.current {
        /*May want another class and the :before rather than using last-child.*/
        background-color: #F7921E;
    }



/* IE11 border bug...