logo标签列表

使用HTML、CSS或jQuery画一个带扇形的圆

jqueryhtmlcssgeometry
4

我希望能够用HTML、CSS或jQuery绘制一个类似下图的圆形扇形图，而不需要使用外部图片：

Circle

如果这些语言无法实现，也可以使用其他编程语言。

1
天啊，那是一张图片？差点就逃过我的眼睛了。 - deostroll
2
@deostroll: http://www.lagom.nl/lcd-test/ - thirtydot
相关：https://dev59.com/CWgu5IYBdhLWcg3wOUkk#24737168 - web-tiki
5个回答
10

Raphael.js怎么样？

官网上的介绍：

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

...

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

7

虽然有点晚了，但是如果你可以不支持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/

如果你需要支持IE9以下的版本，正如Andrew所提到的，Raphaël是最佳选择。

哎呀，你来晚了。这是非常简单的 CSS 代码，但我还不太理解 CSS。可以请你给我讲解一下吗？谢谢。 - KillerFish
这真是太棒了，你只用 CSS 就画出了那个，我从未想过这是可能的... - Maxim Gershkovich
记录一下：这在IE 11上可以运行，并且应该可以在IE 9和10上运行。 - Niek
1
@Niek 谢谢提醒，已更新答案。我回答这个问题时，IE 9还不存在（我想是这样的！）。 - methodofaction
1

请参阅CSS Shapes文章以了解更多信息。

显然，只有好的浏览器才支持此功能，但以下是我实现它的方法--

  • 创建一个相对定位的容器元素。
  • 在其中，创建一个根据上述文章为圆形的元素。
  • 在此之后（但使用z-index放置在圆形元素上方），创建两个绝对定位的元素，使用rgba并具有透明填充颜色，但具有白色边框以构成交叉部分。
  • 最后，在其上方创建一个具有最高z-index的最终圆形，使其成为中心圆形。
1
你可能想要查看HTML5 Canvas。
HTML5目前正在开发中，因此如果您希望包括对固执的老Microsoft IE的支持，您需要使用一个外部库（设置非常简单）。

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]-->
0
只是想指出 - 用户说要使用CSS或jQuery，而不是HTML画布...@Reigel - 对不起，我忽略了这一点。 - Connor
@Connor - 标题是“如何使用html、css或jquery绘制带有扇形的圆形” - Reigel Gallarde
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接