CSS Shape alignment issue

Question

I'm having trouble aligning CSS arrows:

The spacing between all elements is different, and the arrows don't quite fit either.

Also when shrinking the browser size, the elements lap over the top of each other.

Any help would be appreciated, thanks.

/*
    Common 
*/

.wizard,
.tabcontrol
{
    display: block;
    width: 100%;
    overflow: hidden;
}

.wizard a,
.tabcontrol a
{
    outline: 0;
}

.wizard ul,
.tabcontrol ul
{
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.wizard ul > li,
.tabcontrol ul > li
{
    display: block;
    padding: 0;
}

/* Accessibility */
.wizard > .steps .current-info,
.tabcontrol > .steps .current-info
{
    position: absolute;
    left: -999em;
}

.wizard > .content > .title,
.tabcontrol > .content > .title
{
    position: absolute;
    left: -999em;
}



.wizard > .steps > ul {
        list-style: none;
        display: inline-table;
}



.wizard > .steps
{
    position: relative;
    display: block;
    width: 100%;
}

.wizard > .steps .number
{
    font-size: 1.429em;
}

.wizard > .steps > ul > li
{
    width: 20%;
}

.wizard > .steps > ul > li,
.wizard > .actions > ul > li
{
    float: left;
    display: inline;
}


.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active
{
    display: block;
    float: left;
    height: 73px;
    text-align: center;
    padding: 30px 40px 0 80px;
    position: relative;
    margin: 0 10px 0 0; 

    text-decoration: none;
    color: #fff;

}


.wizard > .steps > ul > li a:after {
    content: "";  
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #aaa;
    position: absolute; right: -40px; top: 0;
    z-index: 1;
}

.wizard > .steps > ul > li a:before {
    content: "";  
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #fff;
    position: absolute; left: 0; top: 0;
}


.wizard > .steps > ul > li:first-child a {
    border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}

.wizard > .steps > ul > li:first-child a:before {
    display: none; 
}

.wizard > .steps > ul > li:last-child a {           
    border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}

.wizard > .steps > ul > li:last-child a:after {
    display: none; 
}


.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active
{
    background: #eee;
    color: #aaa;
    cursor: default;
}

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active
{
    background: #000000;
    color: #fff;
    cursor: default;
}

.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active
{
    background: #949494;
    color: #fff;
}

.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active
{
    background: #ff3111;
    color: #fff;
}




.wizard > .content
{
    background: #fff;
    display: block;
    margin: 0.5em;

    overflow: hidden;
    position: relative;
    width: auto;


    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard.vertical > .content
{
    display: inline;
    float: left;
    margin: 0 2.5% 0.5em 2.5%;
    width: 65%;

}

.wizard > .content > .body
{
    float: left;
    position: absolute;
    width: 95%;
   padding: 2%;

}

.wizard > .content > .body ul
{
    list-style: disc !important;
}

.wizard > .content > .body ul > li
{
    display: list-item;
}

.wizard > .content > .body > iframe
{
    border: 0 none;
    width: 100%;
    height: 100%;
}

.wizard > .content > .body input
{
    display: block;
    border: 1px solid #ccc;
}

.wizard > .content > .body input[type="checkbox"]
{
    display: inline-block;
}

.wizard > .content > .body input.error
{
    background: rgb(251, 227, 228);
    border: 1px solid #fbc2c4;
    color: #8a1f11;
}

.wizard > .content > .body label
{
    display: inline-block;
   /* margin-bottom: 0.5em;*/
}

.wizard > .content > .body label.error
{
    color: #8a1f11;
    display: inline-block;
    margin-left: 1.5em;
}

.wizard > .actions
{
    position: relative;
    display: block;
    text-align: right;
    width: 100%;
}

.wizard.vertical > .actions
{
    display: inline;
    float: right;
    margin: 0 2.5%;
    width: 95%;
}

.wizard > .actions > ul
{
    display: inline-block;
    text-align: right;
}

.wizard > .actions > ul > li
{
    margin: 0 0.5em;
}

.wizard.vertical > .actions > ul > li
{
    margin: 0 0 0 1em;
}

.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active
{
    background: #000000;
    /*#2184be;*/
    color: #fff;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active
{
    background: #eee;
    color: #aaa;
}

.wizard > .loading
{
}

.wizard > .loading .spinner
{
}



/*
    Tabcontrol
*/

.tabcontrol > .steps
{
    position: relative;
    display: block;
    width: 100%;
}

.tabcontrol > .steps > ul
{
    position: relative;
    margin: 6px 0 0 0;
    top: 1px;
    z-index: 1;
}

.tabcontrol > .steps > ul > li
{
    float: left;
    margin: 5px 2px 0 0;
    padding: 1px;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tabcontrol > .steps > ul > li:hover
{
    background: #edecec;
    border: 1px solid #bbb;
    padding: 0;
}

.tabcontrol > .steps > ul > li.current
{
    background: #fff;
    border: 1px solid #bbb;
    border-bottom: 0 none;
    padding: 0 0 1px 0;
    margin-top: 0;
}

.tabcontrol > .steps > ul > li > a
{
    color: #5f5f5f;
    display: inline-block;
    border: 0 none;
    margin: 0;
    padding: 10px 30px;
    text-decoration: none;
}

.tabcontrol > .steps > ul > li > a:hover
{
    text-decoration: none;
}

.tabcontrol > .steps > ul > li.current > a
{
    padding: 15px 30px 10px 30px;
}

.tabcontrol > .content
{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 35em;
    overflow: hidden;
    border-top: 1px solid #bbb;
    padding-top: 20px;
}

.tabcontrol > .content > .body
{
    float: left;
    position: absolute;
    width: 95%;
    height: 95%;
    padding: 2.5%;
}

.tabcontrol > .content > .body ul
{
    list-style: disc !important;
}

.tabcontrol > .content > .body ul > li
{
    display: list-item;
}

@media (max-width: 600px)
{
    .wizard > .steps > ul > li
    {
        width: 50%;
    }

    .wizard > .steps a,
    .wizard > .steps a:hover,
    .wizard > .steps a:active
    {
        margin-top: 0.5em;
    }

    .wizard.vertical > .steps,
    .wizard.vertical > .actions
    {
        display: block;
        float: none;
        width: 100%;
    }

    .wizard.vertical > .content
    {
        display: block;
        float: none;
        margin: 0 0.5em 0.5em;
        width: auto;
    }
}

@media (max-width: 480px)
{
    .wizard > .steps > ul > li
    {
        width: 100%;
    }
}

<div class="steps clearfix">
  <ul role="tablist">
    <li class="first current" role="tab" aria-disabled="false" aria-selected="true">
      <a id="wizard-form-t-0" aria-controls="wizard-form-p-0" href="#wizard-form-h-0">
        <span class="current-info audible">current step: </span>
        <span class="number">1.</span>
        System
      </a>
    </li>
    <li class="disabled" role="tab" aria-disabled="true">
      <a id="wizard-form-t-1" aria-controls="wizard-form-p-1" href="#wizard-form-h-1">
        <span class="number">2.</span>
        Main Entrances
      </a>
    </li>
    <li class="disabled" role="tab" aria-disabled="true">
      <a id="wizard-form-t-2" aria-controls="wizard-form-p-2" href="#wizard-form-h-2">
        <span class="number">3.</span>
        Block Entrances
      </a>
    </li>
    <li class="disabled" role="tab" aria-disabled="true">
      <a id="wizard-form-t-3" aria-controls="wizard-form-p-3" href="#wizard-form-h-3">
        <span class="number">4.</span>
        Apartments
      </a>
    </li>
    <li class="disabled last" role="tab" aria-disabled="true">
      <a id="wizard-form-t-4" aria-controls="wizard-form-p-4" href="#wizard-form-h-4">
        <span class="number">5.</span>
        Accessories
      </a>
    </li>
  </ul>
</div>

I don't know if you saw the other thread I linked earlier. You could do this with skew transforms instead of border-triangles and it makes it more simple. I am linking that answer again here - http://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only/28196665#28196665 (though this time it is not a duplicate because you are asking a specific question about alignment). — Harry, May 27 '16 at 14:11
Hmm...upon running your code, it doesn't seem to emulate what you've depicted in your image. Are you sure what you've included is complete and correct? It looks like you're missing the `.wizard` element, but I'd prefer you add it rather than me trying to guess the correct structure. — Serlite, May 27 '16 at 14:13
Your code is still not depicting what the image is. Can you make a fiddle? — Tom Eberhardt-Smith, May 28 '16 at 05:00

CSS Shape alignment issue

0 Answers0