使用HTML,CSS或jQuery绘制一个圆圈(带扇区)

Question

我想绘制一个带有扇区的圆圈而不使用外部图像,如下图所示:

我更喜欢使用HTML,CSS或jQuery,但如果它们不起作用,那么任何其他语言都可以.

Answer 1

Raphael.js怎么样？

来自网站:

Raphaël是一个小型JavaScript库,可以简化您在Web上使用矢量图形的工作.例如,如果要创建自己的特定图表或图像裁剪和旋转小部件,则可以使用此库轻松实现.

...

Raphaël目前支持Firefox 3.0 +,Safari 3.0 +,Chrome 5.0 +,Opera 9.5+和Internet Explorer 6.0+.

Answer 2

派对迟到了,但是如果你可以逃脱不支持IE <9你就可以用纯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;
}

请参阅此处的代码:http://jsfiddle.net/nchtG/

如果你需要在小于9的版本中支持IE,正如安德鲁已经提到的那样,Raphaël是你最好的选择.