用CSS实现饼图效果。

没什么卵用，但有趣的知识增加了。hello小伙伴们好，我是柴老师。今天我们来继续分享一个好玩的案例。

它有这样的需求，要求我们用纯CS5的方式实现饼图。这个饼图一共是到4个颜色，每个色值占1/4。

大家想想看，如果不让你用其他的就用纯CS5如何来做？我们直接过来一起来实现一下。其实实现这个功能它的思路也比较容易。我们来一起看一下。

我们可以通过一个Div给它创建出来，无非添加一个圆角为50%。这个圆大家想想看它一共是，然后可以给这个盒子创建四个背景，每一个占90度是不是就实现这个小需求了。

这里提供了四个色值，分别是红色、绿色、黄色以及紫色。这样我们的红色它站的角度是0到90度对不对？

绿色它占的角度是90度，然后到270度。再往下我们的黄色它占的是180度，最后这个紫色它是270度，到我们的360度是不是这样个逻辑？逻辑有了以后具体用哪个技术来实现？其实我们要用到一个CS5，它叫做conic gradient，这个函数可以帮助我们去创建不同的四个背景以及它相关的一个角度。

接下来我们先过来创建个圆出来。这里我创建了一个div，然后上面它的宽高都是，如何让它变成一个圆？是不是加上一个圆角就可以了？我们加个圆角为50%，这样它就会出现一个圆对不对？

我们保存一下，先过来看一下我们的圆，大家看它变成了一个圆，然后接着用我们的关键去创建它的一个四个背景。我们先过来给它来一个background，然后用一下我们这个核心函数，把它放过来，这个函数是不是需要调用，然后在里面我们依次把这个颜色和它对应的角度给它渲染出来就可以了。

第一个是我们的红色，红色它所占的角度是90度，咱们给一个90度。第二个是绿色，它是90度到180度，那我们就先写一个90，然后再来一个green到180。

第二个green也创建好了，再往后是我们的yellow，是180-270，好yellow 180，再来一个yellow，它是270结束。最后一个是我们的紫色，我们的purple，purple它一直到最后就可以了，从270开始，咱们就写一个270，前面这个别忘了加单位，都给它把单位加上。

大家看一下这个完整代码。第一个颜色值第二个颜色值，咱们初始和咱们的结尾都不需要写这个区间。这样写完以后我们可以过来预览一下，是不是已经变成了我们想要这个样子。

咱们保存一下过来看，大家看这个拥有4个色值的饼图是不是就已经实现了。后续大家可以利用这个函数实现简单的饼图，大家可以在这个函数里边随意调整我们的颜色以及它所占的角度。

今天的分享就先到这里，没有什么卵用，但是有趣的东西又增加了！好玩