当前位置：首页 > CSS

css制作扇形图

2026-01-16 10:42:06CSS

使用CSS制作扇形图

使用CSS的clip-path属性可以轻松创建扇形图。通过定义多边形的顶点坐标，可以裁剪元素为扇形形状。

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

.pie-chart {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 50%;
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 50% 50%);
}

使用CSS和SVG制作扇形图

SVG的path元素可以更精确地绘制扇形图。通过定义路径的弧线命令，可以创建任意角度的扇形。

<svg width="200" height="200" viewBox="0 0 200 200">
    <path d="M100,100 L100,0 A100,100 0 0,1 200,100 Z" fill="#e74c3c"/>
</svg>

使用CSS动画制作动态扇形图

结合CSS动画和clip-path属性，可以创建动态的扇形图效果。通过关键帧动画改变裁剪路径的形状。

.pie-chart {
    width: 200px;
    height: 200px;
    background-color: #2ecc71;
    border-radius: 50%;
    clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 50%);
    animation: fillPie 2s forwards;
}

@keyframes fillPie {
    to {
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 50% 50%);
    }
}

使用CSS变量制作可配置扇形图

通过CSS变量可以动态调整扇形的角度和大小。这种方法使得扇形图的参数可以轻松修改。

.pie-chart {
    --angle: 90deg;
    width: 200px;
    height: 200px;
    background-color: #9b59b6;
    border-radius: 50%;
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 50% 50%);
}

使用伪元素创建多色扇形图

通过叠加多个伪元素，每个使用不同的clip-path和颜色，可以创建多色扇形图。

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

.pie-chart::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f1c40f;
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 50% 50%);
}

.pie-chart::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #e67e22;
    clip-path: polygon(50% 50%, 50% 0, 0 0, 50% 50%);
}

css制作扇形图