Question

In HTML, I would like to do something like this:

<div class="thermometer">
  <div class="circle purple">
    <div class="pie-piece percent=75%">
    </div>
  </div>
</div>

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)

My CSS for circle is this:

.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)

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”?

Answer 1

If you are referring to this tutorial, the “Hold” and “pieSlice1” are just the names of the class & ID.

You could predefine a a degree then use jQuery and change the CSS depending on what you get from the database. Check out this post for some more information.

.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});

http://jsfiddle.net/t7zLP/1/