[分享]css3实现饼状图

饼状图是一种展示数据分布的常用图表类型，可以通过CSS3来快速的实现。CSS3中的伪元素和transform属性可以帮助我们实现饼状图的效果。.piechart { : relative; width...

饼状图是一种展示数据分布的常用图表类型，可以通过CSS3来快速的实现。CSS3中的伪元素和transform属性可以帮助我们实现饼状图的效果。

.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: lightgray;
}

.pie-chart::before {
  content: ';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 100px, 200px, 0);
  background-color: red;
  transform: rotate(45deg);
}

.pie-chart::after {
  content: ';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 100px, 200px, 0);
  background-color: green;
  transform: rotate(135deg);
} 

以上是一个简单的饼状图的实现，通过在饼状图容器中添加两个伪元素before和after来表示两个数据部分。通过clip属性将部分内容裁剪掉，再通过transform属性让饼状图旋转到正确的位置。

如果想要实现更多的数据部分，只需要继续在饼状图容器中添加伪元素，并在其中设置不同的旋转角度和背景色。