Page 107 - css揭秘

难题

饼图在网页中的运用极为普遍，比如简单的统计图表、进度指示器、定
时器等，不一而足。尽管如此，饼图在过去很长一段时期内完全无法通过
Web 技术创建出来，即便是最简单的两种颜色的形态也不例外。

过去要实现饼图，要么动用一个外部的图像处理软件来为饼图中的
多个值制作多张图片，要么动用那些专门为复杂图表而设计的 JavaScript
框架。

尽管这件事情已经不像过去那样“难于上青天”，但也仍然不存在“一
行代码万事大吉”的捷径。不过总的来说，眼下已经有一些更便捷、更易维
护的方法来实现饼图了。

基于 transform 的解决方案

这个方案在结构层面是最佳选择：它只需要一个元素作为容器，而其他
部分是由伪元素、变形属性和 CSS 渐变来实现的。让我们先从一个简单的
元素开始：

<div class="pie"></div> HTML

假设我们目前的需求是一个最简单的饼图，其展示的比率是固定的
20%；稍后再来改进它的灵活性。我们首先把这个元素设置为一个圆形，以
它作为背景（参见图 3-50）：

.pie {
width: 100px; height: 100px;
border-radius: 50%;
background: yellowgreen;
}

我们的饼图是绿色的（确切地说是 yellowgreen），并将采用棕色
（ #655）来显示比率。我们首先可能会想到用斜向拉伸变形来处理比率扇
区，但稍加尝试就会发现，这其实是一条死胡同。于是我们换种思路，把圆
形的左右两部分指定为上述两种颜色，然后用伪元素覆盖上去，通过旋转来
图 3-50 决定露出多大的扇区。
我们的起点（或者把它看成一个
比率为 0 的饼图） 为了把圆形的右半部分设置为棕色，我们要用到一个简单的线性渐变：

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

在图 3-51 中可以看到，其结果正是我们所需要的。接下来，我们可以
继续设置伪元素的样式，让它起到遮盖层的作用：

76 第 3 章 形状

඀ࠡ JOEC