layout - 高级 CSS 圈子

Question

我正在尝试为我的网站创建 3 个不同的圈子。我不想将其作为图形/图像文件插入。所以我一直在尝试使用 CSS3 来实现它，但我真的无法解决它。

它会是什么样子？我上传了一张我想要实现的图片:www.sp34k.com/etc/circles.jpg我无法真正显示我一直试图用来实现此目的的代码，因为它看起来很奇怪，而且没有任何内容是当前 float 的。

我尝试过的我试过的是用绝对位置制作 3 个圆圈，然后使用 %(百分比)来确定彩色部分的宽度，但我无法思考应该如何设置它。

任何建议表示赞赏，迈克

Answer 1

下面是我简单的尝试，达到你想要的效果:

DEMO

编辑:css-only solution

它可以很容易地使用 javascript 或关键帧进行动画处理。任意内容将进入 inner div。要更改百分比，只需调整伪元素的 Angular 即可。

我想这可以很容易地改进；)

注意:转换具有 webkit-prefix，因此它仅适用于 chrome/safari - 要在 firefox 或其他浏览器中查看它，您需要更改前缀。

附言当我下类回家时，我会制作动画。