使用HTML，CSS或jQuery绘制一个圆圈（带扇区）

Question

我想在其上绘制一个带有扇区的圆圈，而不使用如下图所示的外部图像：

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

Answer 1

Answer 2

迟到了派对，但如果你可以逃脱不支持IE＆lt; 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是你最好的选择。

Answer 3

请参阅this article for CSS Shapes

显然只有优秀的浏览器会支持这一点，但这就是我要做的事情 -

• 拥有一个位置为relative的容器元素。
• 在其中，有一个元素，根据上面的文章，是一个圆圈。
• 之后（但使用z-index在圆形元素的顶部），有2个绝对定位的元素，它们使用rgba并且是透明填充颜色，但是有白色边框来构成横截面
• 最重要的是，最后一个圆圈的z-index最高，这使得中心圆

Answer 4

您可以查看HTML5 Canvas。

HTML5目前正在开发中，因此如果您希望通过顽固的“Microsoft：

包含对IE的支持，则需要使用external library（这很容易设置）

  

最新版本的Firefox，   Safari，Chrome和Opera都支持   对于HTML5 Canvas但IE8没有   本地支持画布。

     

您可以使用ExplorerCanvas   通过互联网获得画布支持   资源管理器。你只需要包含   这个javascript如下：

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

Answer 5

使用HTML canvas。

但不会在IE上工作......