将一个圆形div转为按比例填色的饼图

要将一个圆形DIV转化为按比例填色的饼图，可以使用CSS3中的旋转和渐变属性来实现。步骤如下：

1. 首先，将DIV设置成圆形，可以设置宽高相等，边框半径为50%。

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

2. 使用CSS3中的旋转属性将DIV旋转90度，使得起始点处于12点钟方向。

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transform: rotate(-90deg);
}

3. 使用CSS3中的渐变属性来填充颜色。可以使用多个颜色渐变来实现按比例填充的效果，比如在本例中使用了红色和蓝色渐变。

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transform: rotate(-90deg);
  background: conic-gradient(red 0 50%, blue 0 100%);
}

其中，conic-gradient是CSS3中的一个渐变函数，可以根据角度来控制渐变方向和数量。

4. 最后，可以添加一些样式来美化饼图，比如添加边框或者阴影效果。

完整的代码如下：

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transform: rotate(-90deg);
  background: conic-gradient(red 0 50%, blue 0 100%);
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

这样，就可以将一个圆形DIV转化为按比例填色的饼图了。