title: Creating the vertical progress bar with html and css3?
body: <p>I made ​​a horizontal progress bar that does not have a problem with it  </p>
  
  <p>But the progress bar's vertical lines are not correct.  </p>
  
  <p>I put a picture of the problem.</p>
  
  <p><a href="http://jsfiddle.net/post98/juGXZ/1/" rel="nofollow noreferrer">jsfiddle.net/post98/juGXZ/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="progress-bar  horizontale"&gt;
          &lt;div class="inner"&gt;&lt;span&gt;|||||||&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="progress-bar verticale"&gt;
          &lt;div class="inner"&gt;&lt;span&gt;___ ___ ___ ___ ___&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      background: url('https://www.dropbox.com/s/8g7pf7ig7fw5e0v/main_bg.png') repeat;
  }
  
  .progress-bar.verticale {
      width: 24px;
      height: 300px;
      /*border: 1px solid #060707;*/
      margin: 10px auto;
      background-color: rgba(0, 0, 0, 0.25);
      box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
      border-radius: 10px;
      padding: 4px;
      transform: rotate(180deg);
      display: inline-block;
  }
  
  
  .progress-bar.horizontale {
      width: 300px;
      height: 24px;
      /*border: 1px solid #060707;*/
      margin:  auto;
  
      background-color: rgba(0, 0, 0, 0.25);
      box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
      border-radius: 10px;
      padding: 4px;
      display: inline-block;
  }
  
  .progress-bar.horizontale .inner {
      background: linear-gradient(#FFCC33, #CC9900);
      border-radius: 12px;
      position: absolute;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
      height: 24px;
      width: 200px;
  }
  
  .progress-bar.horizontale .inner span {
      background: repeat scroll 0 0 #999999;
      position: absolute;
      font: bold  120px/40px sans-serif ;
      letter-spacing: -6px;
      height: 24px;
      opacity: 0.06;
      overflow: hidden;
      transform: skewX(-30deg);
  }
  
  .progress-bar.verticale .inner {
      background: linear-gradient(#FFCC33, #CC9900);
      border-radius: 12px;
      position: absolute;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
      height: 200px;
      width: 24px;
  }
  
  .progress-bar.verticale .inner span {
      background: repeat scroll 0 0 #999999;
      position: absolute;
      font: bold  20px/30px sans-serif ;
      letter-spacing: -6px;
      height: 200px;
      width: 20px;
      opacity: 0.06;
      overflow: hidden;
      transform: skewY(30deg);
  }
  </code></pre>
  
  <p>Here the <a href="https://www.dropbox.com/s/2nghqxvw7ig3q3s/2.JPG" rel="nofollow noreferrer"><strong>Picture</strong></a></p>