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.