Circle drawing (with sectors) using HTML, CSS or jQuery

Question

I want to draw a circle with sectors on it without using external images like the image below:

I would prefer to use HTML, CSS or jQuery, but if they do not work, then any other language will do.

Answer 1

What about Raphael.js ?

On the website:

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the Internet. if you want to create your own chart or crop the image and rotate the widget, for example, you can achieve this simply and easily with this library.

...

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+, and Internet Explorer 6.0+.

Answer 2

Late party, but if you manage to avoid IE <9 support you can do it in pure CSS.

<div id="center"> <div id="tl"></div> <div id="tr"></div> <div id="bl"></div> <div id="br"></div> </div> div { width: 50px; height: 50px; background-color: #ccc; border-radius: 100px; } #center { position: relative; margin: 100px 0 0 100px; border: solid #fff 1px; } #tl, #tr, #bl, #br { position: absolute; height: 75px; width: 75px; z-index: -1; } #tl { border-radius: 100px 0 0 0; top: -50px; left: -50px; } #tr { border-radius: 0 100px 0 0; top: -50px; left: 26px; } #bl { border-radius: 0 0 0 100px; top: 26px; left: -50px; } #br { border-radius: 0 0 100px 0; top: 26px; left: 26px; } 

See the code in action here: http://jsfiddle.net/nchtG/

If you need to support IE in versions less than 9, as Andrei already mentioned, Raphaël is your best option.

Answer 3

See this article for CSS shapes.

Obviously, only good browsers would support this, but here's how I would do it -

• Have a container element that is position: relative.
• Inside this element there is an element which, based on the above article, is a circle.
• After that (but on top of the circle element using the z-index), you have 2 absolutely positioned elements that use rgba and are transparent fill color, but have white borders to make a section
• In addition, we get the final circle with the highest z-index, which makes the center circle

Answer 4

You can check out the HTML5 Canvas .

HTML5 is currently under development, so you will need to use an external library (which is pretty easy to set up) if you want to enable IE stubborn ol 'Microsoft support:

The latest versions of Firefox, Support for Safari, Chrome and Opera for HTML5 canvas, but IE8 not support canvas.

You can use ExplorerCanvas to have canvas support through Internet Explorer. You just need to enable this javascript as follows:

 <!--[if IE]><script src="excanvas.js"></script><![endif]--> 

Answer 5

using HTML canvas .

but doesn't work on IE though ...