Layout 高级CSS圈

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

它会是什么样子？ 我已经上传了一张我正在努力实现的图片： 我无法真正展示我一直试图用以实现这一点的代码，因为这一切看起来都很奇怪，而且没有任何东西是当前浮动的

我尝试过的 我试着做3个绝对位置的圆圈，然后用%（百分比）来确定彩色部分的宽度，但是我不能改变我的想法，如何设置它

如有任何建议，我们将不胜感激，

---

Mike

以下是我的一个简单尝试，以达到您想要的效果：

编辑：

可以使用javascript或关键帧轻松设置动画。任意内容将进入

内部
分区。要更改百分比，只需调整伪元素的角度

我想，只要再努力一点，就可以很容易地改进它；）

注意：转换有webkit前缀，因此它只在chrome/safari中工作-要在firefox或其他浏览器中看到它，您需要更改前缀

另外，我会在下班回家后制作动画。
克里斯托夫的好作品，但他使用的是SASS/SCSS，比普通CSS慢，因为它们必须在浏览器渲染之前转换为CSS，所以我有一个不同的解决方案

试试这个
您可能会更幸运地使用像Raphaël这样的JavaScript向量库：感谢您提供了快速响应混合器。我会看看图书馆，看看我是否能想出如何使用它。@Blender-你的建议是一个很好的选择！我在他的网站上找到了很多有用的东西，绝对是一个很棒的图书馆，谢谢分享如果没有其他人有一个解决方案来实现上述链接中所示的圆圈，那么我将使用您提供的这个JavaScript库。非同寻常！这正是我要找的设置！非常感谢你的解决办法。@Mike，不客气。不久前我想尝试一下，所以现在这是一个开始的好机会；）也许我们俩都会学到一些新东西：）。不过，我有点困惑。我从未见过或使用过您定义CSS的方式，如$br:60px$dimbg=120px$dimin=90px；$等等，它们应该被列在CSS中吗？@Mike，它是这样写的。看一看，写CSS很舒服。@Mike基本上这些只是变量。您可以在CSS中用顶部定义的相应值替换这些值，并使用有效的CSS。我在阅读有关SASS/SCSS的文章时，安装了Ruby，并试图将文件“转换”为CSS，但老实说，这相当令人困惑。我尝试了你的方法@Champ，它很容易作为一个静态解决方案集成到我的项目中，我不是一个支持css的家伙，但这是一个简单的方法。因此，感谢您提供这个CSS示例：）brofistsry，但您在胡说八道champ-sass是预编译的，因此它绝对不会影响浏览器的渲染速度@迈克，正如我说的，你只需要替换变量，你可以告诉我，我会给你一个纯css解决方案。我觉得把我所做的工作归功于其他人是很不体面的。此外，此解决方案也不会像您希望的那样工作，因为它只能指示25%的步数。@Christoph别激动我很抱歉有人评论说SASS/SCSS速度慢，您所做的工作真的令人钦佩。但我从来没有为您所做的工作负责。我介绍的小提琴纯粹是由您开发的me@Christoph我为让你感到不尊重而道歉。为了让你介绍解决方案，我将你的回答标记为“答案”。请记住，我对这些技术不是很有经验，因此我选择了“最简单”的解决方案，虽然我确实安装了Ruby并继续使用了您提供的解决方案，但我没有成功，因此我选择了Champ的解决方案，尽管它是基于您的解决方案。我为不公平的待遇道歉。Champ：当然是你自己开发的，这就是为什么你有和我的解决方案完全相同的标记。。。还有，您希望如何显示，比如说“67%”？您只能显示4个状态，这不是Mike想要的@Mike我为您提供了一个css解决方案。但也许你想更深入地了解SASS，或者如果这对你来说更容易的话-。它使用javascript，还可以编译css客户端。在任何情况下，学习它都是一件好事——如果你正在从事更大的项目，从长远来看，它将为你节省大量的工作。