Page 108 - css揭秘

.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
}

可以在图 3-52 中看到，我们的伪元素现在相对于整个饼图进行了重叠。
不过现在还没有设置任何样式，它还起不到遮盖的作用：暂时只是一个透明
的矩形。在开始为它设置样式之前，我们还要再做一些观察和分析。
„ 我们希望它能遮盖圆形中的棕色部分，因此应该给它指定绿色背景。 图 3-51
在这里使用 background-color: inherit 声明可以避免代码的重 用一个简单的线性渐变来把图形
复，因为我们希望它的背景色与其宿主元素保持一致。 的右半部分设置为棕色
„ 我们希望它是绕着圆形的圆心来旋转的，对它自己来说，这个点就
是它左边缘的中心点。因此，我们应该把它的 transform-origin
设置为 0 50%，或者干脆写成 left。
„ 我们不希望它呈现出矩形的形状，否则它会突破整个饼图的圆形范
围。因此要么给 .pie 设置 overflow: hidden 的样式，要么给这个
伪元素指定合适的 border-radius 属性来把它变成一个半圆。

综合上面的思路，这个伪元素的 CSS 就确定下来了：

.pie::before {
content: ''; 图 3-52
display: block; 把伪元素当作遮盖层来用，它的
margin-left: 50%; 位置用虚线框标示
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
} !
不要在这里用 background:
inherit;， 而应该用 backgr-
我们的饼图看起来就是图 3-53 中的样子了。接下来，美好的事情即将 ound-color: inherit;，否则渐
发生！我们现在可以通过一个 rotate() 变形属性来让这个伪元素转起来。 变背景也会被继承过来。
如果我们要显示出 20% 的比率，我们可以指定旋转的值为 72deg（0.2 ×
360 = 72），写成 .2turn 会更加直观一些。在图 3-54 中，你还可以看到其
他一些旋转值的情况。

你可能以为这就大功告成了，但事实上我们才刚刚开了个头。我们的饼
图在显示 0 到 50% 的比率时运作良好，但如果我们尝试显示 60% 的比率时
（比如指定旋转值为 .6turn 时），结果就变成如图 3-55 所示了。不过也别泄
气，我们一定能够排除万难修复这个问题！
如果把 50%~100% 的比率看作另外一个问题，我们就会发现，可以使
用上述技巧的一个反向版本来实现这个范围内的比率：设置一个棕色的伪 图 3-53
元素，让它在 0 至 .5turn 的范围内旋转。因此，要得到一个 60% 比率的饼 设置好样式之后的伪元素，用虚
线框标示
图，伪元素的代码可能是这样的：

14 简单的饼图 77

඀ࠡ JOEC