有意思的css-饼状图

1、效果图

效果图

我们都知道，元素盒子都是矩形的形状，我们要做到饼状图，其实是不容易的，但是我们可以另辟蹊径，通过css的属性来实现，这里我们主要用到的css属性有 overflow,opacity,transform。

2、代码思路

我们首先只考虑50%以下的，这样方便理解。

//css代码
      body{
            background-color: #ccc;
        }
        .box{
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            background-color: #fff;
        }
        .left,.right{
            width: 50%;
            height: 100%;
            float: left;
            position: relative;
            overflow: hidden;
        }
        .right-item{
            width: 100%;
            height: 100%;
            position: absolute;
            left: -100%;
            background-color: #f00;
            transform-origin: right;
            transform: rotate(90deg);
        }
//html代码
    

        

        

            

        
    

效果图

如果只有50%以下的情况，其实很简单,我们把右侧的类名为right-item的元素定位到左侧这样子就看不到了，因为父级元素设置了overflow:hidden然后他沿着自己右侧的中心旋转，就会出现在自己的父级元素里面，这样子，我们就能看到效果了。

考虑到50%-100%的情况
首先我们来看一下如果上述代码超过了50%出现什么情况

效果图

如图所示：我们发现缺了一部分，因为元素旋转出去，父级元素超出隐藏了。
这时候我们有一个思路，超过180度的时候，右侧是全部被颜色填充的，那我们直接放进去一个元素就是了。至于左侧的颜色填充和上面的思路一样，我们把左侧元素的子级元素定位到右侧，然后通过旋转来展示。

/*css代码*/
        body{
            background-color: #ccc;
        }
        .box{
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            background-color: #fff;
        }
        .left,.right{
            width: 50%;
            height: 100%;
            float: left;
            position: relative;
            overflow: hidden;
        }
        .right-item{
            width: 100%;
            height: 100%;
            position: absolute;
            left: -100%;
            background-color: teal;
            transform-origin: right;
            transform: rotate(270deg);
        }
        .right-color{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: teal;
        }
        .left-item{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 100%;
            background-color: teal;
            transform-origin: left;
            transform: rotate(90deg);
        }
//html代码
    

        

            

        
        

            

            

        
    

效果图

这样子我们就实现了50%以上的情况了。
那如果我们拿这个代码来试一试50%一下的情况呢？

效果图

我们会发现多出来一部分，这部分一个是因为右侧多了一个带背景的子级元素，一个是左侧的子级元素因为旋转，出现在自己的父级的范围内。
那么说我们有没有能实现0-100情况的方法呢，当然是有的了。我们可以通过控制元素的opacity来控制多出去的部分。
那我们给类名为right-color和left-item加上opacity:0

效果图

这样就正常了

效果图

上述代码改成50%以上又出现这种情况，那我们有没有办法让它的opacity可变呢？
答案是可以的！我们可以用css变量 var
最终代码

这样我们就实现了饼状图的效果了。

参考文章：
https://www.zhangxinxu.com/study/201903/css-idea/animation-pie.php