Drawing a circle (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'd prefer using HTML, CSS, or jQuery, but if they don't work, then any other language will do.

Answer 1

How about Raphael.js?

From the web site:

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it 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

Coming late to the party, but if you can get away with not supporting IE < 9 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 Andrew 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'd go about doing it --

• Have a container element that is position:relative.
• Inside of that, have an element that, based on the article above, is a circle.
• After that (but on-top of the circle element using z-index), have 2 absolutely positioned elements that have use rgba and are transparent fill color, but have white borders to make up the Cross-section
• On top of that, have a final circle with a highest z-index, that makes the central circle

Answer 4

You may want to check out the HTML5 Canvas.

HTML5 is currently in development, so you will need to use an external library (which is quite easy to setup) if you wish to include support for IE by stubborn ol' Microsoft:

The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8 does not support canvas natively.

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

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

Answer 5

using HTML canvas.

but would not work on IE though...