title: CSS3 pie chart with variable percentage
body: <p>In HTML, I would like to do something like this:</p>
  
  <pre><code>&lt;div class="thermometer"&gt;
    &lt;div class="circle purple"&gt;
      &lt;div class="pie-piece percent=75%"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>where the result would be a 75% filled-in purple circle. (same thing as a pizza cut into 4 pieces, and one piece is missing) (The 75 comes from a database and must not be in the CSS)</p>
  
  <p>My CSS for circle is this:</p>
  
  <pre><code>.thermometer .circle {
      position: absolute;
      width:26px;
      height:26px;
      -moz-border-radius:13px;
      -webkit-border-radius:13px;
      border-radius:13px;
      border: 1px solid #000000;
  }
  .thermometer .green { background-color: green; }
  (other colors)
  </code></pre>
  
  <p>I looked at examples using "hold" and "clip" property, but didn't understand how to do it with a variable. How can I write CSS for "pie-piece"?</p>