当前位置：首页 > CSS

css制作扇形图

2026-03-31 22:49:14CSS

使用CSS制作扇形图

方法一：利用border-radius和transform

通过设置元素的border-radius为50%创建圆形，再利用transform属性旋转部分元素形成扇形。

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

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

.slice {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3498db;
  transform-origin: center right;
}

.slice1 {
  transform: rotate(90deg);
  background: #e74c3c;
}

.slice2 {
  transform: rotate(180deg);
  background: #2ecc71;
}

方法二：使用conic-gradient

CSS的conic-gradient属性可以直接创建扇形效果，无需多个HTML元素。

<div class="pie-chart"></div>

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #e74c3c 0% 30%,
    #3498db 30% 70%,
    #2ecc71 70% 100%
  );
}

方法三：SVG实现

使用SVG的<circle>或<path>元素可以创建精确的扇形图。

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="none" stroke="#e74c3c" stroke-width="160" stroke-dasharray="80 320" />
  <circle cx="100" cy="100" r="80" fill="none" stroke="#3498db" stroke-width="160" stroke-dasharray="160 240" transform="rotate(72 100 100)" />
</svg>

方法四：CSS变量动态控制

结合CSS变量可以动态调整扇形角度。

css制作扇形图

<div class="pie-chart" style="--percentage: 30%;"></div>

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#e74c3c 0 var(--percentage), #eee var(--percentage) 100%);
}