title: Css arrow Progress bar
body: <p>I'm currently in the process of learning all about css, so I'm trying to generate different shapes with different functionalities.</p>
  
  <hr>
  
  <p>I am currently working on a project which requires a horizontal arrow to display the 'progress' of a transaction occurring.</p>
  
  <p>So i'm trying to generate an arrow 'progress bar' like:</p>
  
  <pre><code>                 |\
                   | \
  +----------------+  \
  |XX|    10%          &gt;
  +----------------+  /
    \              | /
     \             |/
      \the XX's depict a different color.
  </code></pre>
  
  <p>I currently Am able to 'fill' up until the arrow head, but the way I've generated the arrow head,I can't seem to 'fill' it in line as well (i.e. at ~90%, half of the physical head should be full) - and not the whole thing.</p>
  
  <hr>
  
  <p><strong>My current snippet:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.arrow{
      margin:0 auto;
      height:100px;
      width:200px;
      background:red;
      margin-top:60px;   
      position:relative;
      /*overflow:hidden;*/
  }
  
  .arrow:before, .prog:before{
      content:"";
      position:absolute;
      right:-100px;
      border-left:100px solid red;
      border-top:100px solid transparent;
      border-bottom:100px solid transparent;
      top:-50%;
  }
  
  .prog{
      position:absolute;
      height:100%;
      width:0%;
      background:blue;
      transition: all 0.8s;
  }
  
  .arrow:hover .prog{
      width:100%;
  }
  .prog:before{
      border-left:100px solid transparent;
      transition: all 0.8s;
  }
  .arrow:hover .prog:before{
      border-left:100px solid blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="arrow"&gt;
      &lt;div class="prog"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>this doesn't really work since you 'see the points' outside of the arrow's body, making it seem like another arrow is appearing in front of it, rather than 'filling it up'. </p>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/jbutler483/L6tn4mca/" rel="nofollow noreferrer">a fiddle lives here</a></p>
  
  <hr>
  
  <p>I've used a hover effect as a demo, although I would like to use jquery to set the percentage complete</p>