Can I draw something like Wheel of Fortune using CSS?

Question

I wish to draw a Wheel of Fortune using just CSS and jQuery. I don't want to use any images.

Also, I want to have at least 8 segments in the circle and properly align each text word vertically in each segment. Here's a photo to illustrate:

Once I have this working I then can use CSS3 rotate property.

Any idea how could I do this?

Solution 1

Here's a Spinning Wheel Demo done in HTML5 using Canvas: LINK

Direct download to the project demo files : ZIP

---

EDIT: Here is a different tutorial demo:
Creating a roulette wheel using html5 canvas

Solution 2

Here is another example of a spinning wheel using a Canvas

Solution 3

Check this link -> http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/

It contains an introductory tutorial to somewhat you need. Check for the JS 2d Transformation library code at github too.

Comments

[Jigar Jain]

css-mask uses images..i just want to use colors instead and also have to write text on it..will it still be useful ?

[swapnesh]

@Jigar Yes why not, u need to set the text div in place of how this post is managing images and its all about an idea ..you can go through this tut and let me know if u face any problem :)

[Jigar Jain]

this one was absolutely perfect..just what i wanted..thanks :)

[Jigar Jain]

but i am actually trying to spin the wheel using CSS3 animation property..And the power options must only alter the speed of spinning using CSS3 again which is possible am sure

[arttronics]

Those two demos are not my work and provided by those authors to use as required. A good jQuery plugin to use for rotation is jqueryrotate.

[Jigar Jain]

Ok..now i have tried my hands on some CSS code..u can see it here link.. So how do i ease the movemment of wheel down slowly on clicking stop button..

[Jigar Jain]

I have used images as of now..u can see it here link but i have a prob..On clicking stop button, the wheel shd\udnt stop at abruptly..Instead it shud slow down..

[arttronics]

I'm not sure. Consider making a new Stackoverflow Question.

[PrateekSaluja]

Its awesome.Can you let me know how to get selected value?

[SourceVisor]

I like this one :)