用css3写饼图

可以使用CSS3的transform属性和伪元素来绘制饼图。以下是一个简单的饼图示例：

HTML代码：

<div class="pie-chart">
  <div class="pie-chart__slice slice1"></div>
  <div class="pie-chart__slice slice2"></div>
  <div class="pie-chart__slice slice3"></div>
  <div class="pie-chart__slice slice4"></div>
</div>

CSS代码：

.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ddd;
  transform: rotate(-90deg);
}

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

.slice1 {
  background-color: #f00;
  transform: rotate(0deg);
}

.slice2 {
  background-color: #0f0;
  transform: rotate(45deg);
}

.slice3 {
  background-color: #00f;
  transform: rotate(90deg);
}

.slice4 {
  background-color: #ff0;
  transform: rotate(135deg);
}

.slice1::before,
.slice2::before,
.slice3::before,
.slice4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: inherit;
  transform-origin: center center;
}

.slice1::before {
  transform: rotate(30deg);
}

.slice2::before {
  transform: rotate(75deg);
}

.slice3::before {
  transform: rotate(120deg);
}

.slice4::before {
  transform: rotate(165deg);
}

首先，创建一个圆形容器，使用`border-radius`属性将其变成圆形，并使用`transform`属性将其旋转-90度，使其起始点位于正上方。

接下来，创建四个切片元素，使用`position: absolute`将其定位在圆形容器的中心。每个切片元素都有不同的背景颜色，并使用`transform`属性将其旋转不同的角度，以形成饼图的不同部分。

为了使切片看起来像是从圆心开始的，我们使用`clip`属性将每个切片元素的大小限制为半径的一半，使其只显示在圆形容器的左上方。然后，使用伪元素在每个切片元素内部创建一个圆形，使其填充整个切片，从而使其看起来像是从圆心开始的。

最后，使用`transform-origin`属性将切片元素和伪元素的变换原点设置为它们的中心，以使它们旋转时绕着圆心旋转。