如何创建具有三个相等切片的css饼图？

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

.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  overflow: hidden;
}

.slice {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border-radius: 50%;
  transform-origin: 100% 50%;
}

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

.slice2 {
  background-color: #00ff00;
  transform: rotate(120deg);
}

.slice3 {
  background-color: #0000ff;
  transform: rotate(240deg);
}