title: Multiple background color for div
body: <p>I have a <code>div</code> </p>
  
  <pre><code>&lt;div class="test"&gt;
     Some text
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to have different <em>background color</em> for the same <code>div</code> by <em>percent</em> (Horizontal coloring)</p>
  
  <pre><code>-----------------------------
  | 20%   |  30%   | 50%      |
  | Red   | Yellow | Green    |
  -----------------------------
  </code></pre>
  
  <p>Is this possible with CSS?</p>