CSS3 pie chart with variable percentage
css, javascript
Solution
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/
Problem
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"?