Search code examples
csscss-shapes

Inner Box Shadow 3 Sides Only and on Triangle - Form Progress Bar

JSFiddle

HTML

<div class="Progress">
    <div class="Step">

    </div>
    <div class="Tri-Fwd"></div>
</div>

CSS

.Progress .Step {
    float:left;
    width:140px;
    height:40px;
    -webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
    -moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
    box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
    border-top-left-radius:6px;
        -moz-border-radius-topleft:6px;
        -webkit-border-top-left-radius:6px;
    border-bottom-left-radius:6px;
        -moz-border-radius-bottomleft:6px;
        -webkit-border-bottom-left-radius:6px;
}

.Progress .Tri-Fwd {
    float:left;
    border-top: 20px solid transparent;
    border-left: 20px solid;
    border-bottom: 20px solid transparent;
    -webkit-box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
    -moz-box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
    box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
}

Reference Image

enter image description here

The Problem

I'm trying to make a CSS only only step-by-step progress however I am having problems with my inner box shadows.

Solution

  • ADVANCED

    enter image description here

    *{box-sizing: border-box; padding: 0; margin: 0}

menu{
    background:  linear-gradient(#fff, #ccc);
    margin: 40px auto;
    border: 1px solid orange;
    border-radius: 4px;
    max-width: 480px;
    overflow: hidden;
    box-shadow: inset 0px 0px 2px #333, 0 0 1px #333;
}

menu li{
    position: relative;
    list-style: none;
    display: inline-block;
    padding: 10px 30px 10px 20px;
    font-size: 20px;
    line-height: 20px;
    margin: 0;
    background: linear-gradient(#f6e6b4 0%, #ed9017 100%);
}

menu li:before, menu li:after{
    content: '';
    position: absolute;
}
menu li:before{
    top: 5px;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    right: -13px;
    box-shadow: 2px -2px 1px 0px #BABABA;
    background:  linear-gradient(135deg, #f6e6b4, #ed9017);
}
menu li.active{color: white}
menu li:nth-child(1){z-index: 2}
menu li:nth-child(2){z-index: 1}
menu li:not(:nth-child(1)){margin-left: -4px; padding-left: 40px}
    <menu>
  <li>Stage 1</li>
  <li class=active>Stage 2</li>
</menu>

    THE BASIC

    *{box-sizing: border-box; padding: 0; margin: 0}

menu{
  background-color: #ccc;
  margin: 40px auto;
  border: 2px solid orange;
  border-radius: 4px;
  max-width: 480px;
  overflow: hidden
}

menu li{
  position: relative;
  list-style: none;
  display: inline-block;
  padding: 10px 4px 10px 20px;
  font-size: 20px;
  line-height: 20px;
  margin: 0;
  box-shadow: -2px 0 0 orange;
  background-color: orange
}

menu li:before, menu li:after{
  content: '';
  position: absolute;
  top: -2px;
  border-bottom: 22px solid transparent;
  border-top: 22px solid transparent
}
menu li:before{
  border-left: 20px solid #ccc;
  left: 100%;
}
menu li:after{
  border-left: 20px solid orange;
  left: 98%;
}

menu li:nth-child(1){z-index: 2}
menu li:nth-child(2){z-index: 1}
    <menu>
  <li>Stage 1</li>
  <li>Stage 2</li>
</menu>