设计一个灵活的、可维护CSS和SVG饼图

说到CSS技术，有一本《CSS的秘密》在一个真正的梦幻般的书，书中讲的CSS的技巧和技术解决日常问题。如果认为自己CSS的相当好，再想想：你会惊讶。在这篇文章中，我们将会用CSS设计简单饼图。注意，由于浏览器的兼容，部分浏览器可能无法达到想要的效果。

饼图，即使在最简单的双色形式，历来不是简单的Web技术创建，尽管是非常常见的范围从简单的数据进步指标和定时器信息。实现通常涉及使用外部图像编辑器来创建多值的多个图像这个饼图，或大型的JavaScript框架设计更复杂的图表。

虽然以前那样做可能不可能，但是他就没有更简单的做法了吧。但是，有许多更好的，今天就用更简单的方式来实现它。

首先简单的页面布局

这个简单的方式选择就开始吧：标记只需一个，其余的是做伪元素，变换和CSS渐变。div标记：

像一般的饼图，显示默认的百分比20%。我们将努力使它灵活的后。让我们先风格的元素是一个圆，这将是我们的背景（图1）：

.pie{

width:100px;height:100px;

border-radius:50%;【圆角】

background:yellowgreen;

}

我们的饼图是绿色的（特别是黄绿色棕色# 655）显示百分比。我们可能会使用百分比部分斜变换，但作为一个小实验，他们被证明是一个非常混乱的解决方案。相反，我们将在我们的左、右圆部分的颜色两种颜色，和使用需要设置旋转属性的伪元素用百分比表示。

圆褐色是我们图案中的一种颜色，我们将使用一个简单的线性渐变来做：

background-image:linear-gradient(to tight,transparent 50%,#655 0);

上图所示，这就是所需的全部内容。现在，我们可以着手设计充当掩饰的伪元素，将作为一个掩饰：

.pie::before{

content:"";

display:block;

margin-left:50%;

height:100%;

}

在上图中可以看到，我们目前是伪元素相对于派元。目前，它不包括任何东西。这只是一个看不见的矩形。开始的造型，可以一起思考：

因为我们想要它包括我们圈的棕色部分，我们需要一个绿色的背景吧，用的背景色： 为避免重复，我们希望它有相同的背景色为其母。

我们希望它绕圆圈的中心，这是对伪元素的左侧中间，所以我们应该把transform-origin属性设置为0 50% 在左侧。

我们不希望它是一个矩形，它让它是过的饼图的边缘，所以我们需要设置 这个 .pie的 overflow: hidden 同时给一个合适的border-radius值 使他成为半圆 。

总而言之，我们的伪元素的CSS将看起来像这样：

.pie::before{content:'';display:block;margin-left:50%;height:100%;border-radius:0100%100%0/50%;background-color:inherit;transform-origin:left;}

注意：不要使用background: inherit;相反的，background-color: inherit; 会被继承了！

目前我们的饼图如上图所示。这是个有趣的开始！我们可以开始旋转的伪元素，通过应用rotate（）

变换。对于20%我们试图实现的，我们可以用一个价值72deg(0.2 × 360 = 72), or2turn。，这是更好的可读性。你可以看到它如何寻找一些其他的值，如图5。

我们简单的饼图显示不同比例；从上到下：10%、20%、40%

我们可能会认为我们做的，但不幸的是，它不是那么简单。我们的饼图适合显示从0到50%的比例，但如果我们试图描述一个60%旋转（通过应用6turn。如下），发生。不要失去希望，虽然，可以和我们一起解决这个问题！

作者：WERH5知识分享
链接：https://www.jianshu.com/p/b75eb13cb3b5