[分享]css3扇形统计图

CSS3扇形统计图是一种非常实用的数据可视化工具，它可以展示复杂数据结构和变化趋势，同时还能够给人带来视觉上的冲击和美感。下面我们就来看一下怎样通过CSS3来实现一个扇形统计图。/ 父容器 / .co...

CSS3扇形统计图是一种非常实用的数据可视化工具，它可以展示复杂数据结构和变化趋势，同时还能够给人带来视觉上的冲击和美感。下面我们就来看一下怎样通过CSS3来实现一个扇形统计图。

/* 父容器 */
.container {
  position: relative;
  width: 200px;
  height: 200px;
}

/* 扇形 */
.sector {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 100px, 200px, 0);
  transform-origin: center center;
}

/* 扇形变形 - 第一个扇形 */
.sector.one {
  transform: rotate(0deg);
  background-color: #ff4500;
}

/* 扇形变形 - 第二个扇形 */
.sector.two {
  transform: rotate(60deg);
  background-color: #fbca0f;
}

/* 扇形变形 - 第三个扇形 */
.sector.three {
  transform: rotate(120deg);
  background-color: #0074d9;
}

/* 扇形变形 - 第四个扇形 */
.sector.four {
  transform: rotate(180deg);
  background-color: #2ecc40;
}

/* 扇形变形 - 第五个扇形 */
.sector.five {
  transform: rotate(240deg);
  background-color: #0074d9;
}

/* 扇形变形 - 第六个扇形 */
.sector.six {
  transform: rotate(300deg);
  background-color: #ff4500;
} 

以上是CSS3扇形统计图的实现代码，其中采用了圆形裁剪以及旋转变形的方法来实现不同角度的扇形。通过修改伪类的旋转角度以及背景颜色等属相来实现对不同数据部分的呈现。