css三色饼图

CSS三色饼图是一种常用的数据可视化方式，通过使用CSS绘制饼图，能够快速而直观地展现数据的比例关系。下面我们来看看如何使用CSS实现一个简单的三色饼图。

<div class="pie">
  <div class="slice red"></div>
  <div class="slice green"></div>
  <div class="slice blue"></div>
</div>

<style>
.pie {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.slice {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0, 100px, 200px, 0);
  border-radius: 50%;
}
.red {
  background-color: red;
  transform: rotate(60deg);
}
.green {
  background-color: green;
  transform: rotate(180deg);
}
.blue {
  background-color: blue;
  transform: rotate(300deg);
}
</style> 

上述代码使用一个包含三个子元素的div来实现饼图，每个子元素代表一个扇形区域。使用绝对定位和clip属性来实现扇形，通过设定不同的rotate角度，来确定每个扇形区域的大小和位置。

另外，为了让饼图具有一定的交互性，我们可以使用:hover伪类来实现鼠标悬停效果。例如，当鼠标悬停在红色区域上时，可以让其变得更明显，以突出其在数据中的重要性。

.red:hover {
  transform: rotate(60deg) scale(1.1);
  z-index: 1;
}
.green:hover {
  transform: rotate(180deg) scale(1.1);
  z-index: 1;
}
.blue:hover {
  transform: rotate(300deg) scale(1.1);
  z-index: 1;
} 

通过简单的CSS代码就可以实现一个三色饼图，不仅能够清晰地展示数据比例关系，还可以增强网页的交互性和美观度。