css3 扇形分布图

CSS3的扇形分布图是一种非常有用的可视化工具，可以帮助我们更好地展示数据。下面我们来了解一下如何使用CSS3实现扇形分布图。

    /* 定义扇形的样式 */
    .pie-chart {
        width: 200px;
        height: 200px;
        position: relative;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 30px;
    }
    
    /* 定义四个扇形的样式 */
    .pie-chart .item1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip: rect(0,100px,200px,0);
        background-color: #f44336;
        transform: rotate(30deg);
    }
    
    .pie-chart .item2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip: rect(0,0);
        background-color: #2196f3;
        transform: rotate(120deg);
    }
    
    .pie-chart .item3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip: rect(0,0);
        background-color: #4caf50;
        transform: rotate(210deg);
    }
    
    .pie-chart .item4 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip: rect(0,0);
        background-color: #ffc107;
        transform: rotate(300deg);
    }

上面的代码定义了一个扇形分布图的样式，包括了整个圆形的样式以及四个扇形的样式，通过clip属性来定义扇形的角度，再通过transform属性来旋转扇形的位置。

接下来可以在HTML中引用以上的样式，这里以四个扇形平均分布的样式为例：

    <div class="pie-chart">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item4"></div>
    </div>

通过设置div元素的class为相应的样式名，即可展示出我们想要的扇形分布图。

这是一个简单的演示，只需要根据实际需求调整样式即可实现更为丰富和多变的扇形分布图。