Creating a circular menu with CSS

Question

I\'m trying to create a circular menu in CSS for a school project.

This is what the menu would look like:

Answer 1

It could be done with regular HTML+CSS, but for the sake of your sanity, don't even try. It's not worth it.

You'd be far better off doing stuff like this in Canvas or SVG. Especially if you don't need to support older versions of IE.

For both Canvas and SVG solutions, I recommend finding a suitable library. In the SVG world, I strongly recommend Raphael. For Canvas, mayby try Paper. You could get the basics up and running with either of these libraries in just a handful of lines of code.

If you must do this in CSS (maybe that's the criteria for your project, or maybe you're just a glutton for punishment), you'll need to start with using border-radius to make the circle. Then draw the segmentation line using 1px-wide boxes, and rotate them using transform. You get the picture; it's not easy, as you've probably already discovered. And getting the thing animated is going to be complete nightmare. It can be done, and as a demonstration piece of what can be achieved in CSS, it would be very clever. But when all your target browsers support SVG and Canvas, doing stuff like this in CSS really is just being clever for the sake of being clever.