css和html画饼状图

CSS和HTML可以很方便地绘制饼状图，下面我们就来介绍如何利用这两种语言来实现。

<!-- HTML代码 -->
<div class="chart">
  <div class="slice s1"></div>
  <div class="slice s2"></div>
  <div class="slice s3"></div>
</div>

首先，我们需要用HTML代码来创建一个容器div和多个子元素div作为图表的各个部分。在样式表中，我们会为div添加一些属性来控制它的大小和位置。

/* CSS代码 */
.chart {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  transform: rotate(-90deg);
}

.slice {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0,100px,200px,0);
  border-radius: 50%;
}

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

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

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

接下来是CSS代码的部分，我们可以用众多CSS属性来控制图表元素的样式和位置。position属性是让div相对于其父元素进行定位，而clip属性则是将切口进行剪切。使用border-radius属性可以让div变为一个圆形元素，从而形成饼状图，而使用transform属性可以让它们变形并旋转。

经过HTML和CSS代码的处理，我们就能够得到一个完整的饼状图，图中不同颜色的部分表达了数据的不同百分比，形象生动地展现了数据分布的情况。