title: How do I color in non-geometric shapes extracted from Photoshop using CSS?
body: <p>I have an image of an outline of people holding hands--extracted from Photoshop--that I'm trying to color in from left to right, according to specified percentages. For example, sometimes I may only want 30% of the whole image filled in from left to right, with a certain color.</p>
  
  <p>Problem is that when I try to color from left to right, I end up coloring in the areas outside the shapes, as well. Seems like the shapes are contained in some sort of rectangle, even though they were specifically extracted without any outside container, using Photoshop.</p>
  
  <p>This is the closest I've come so far: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pic {
      background: linear-gradient(to right, red 50%, white 50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pic" &gt;
      &lt;img class = "image" height= "100%" width = "100%" src="http://i57.tinypic.com/2h5mmom.png"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>