純CSS怎么寫餅狀圖

在CSS中，我們可以使用border-radius屬性來繪制圓形，利用這個屬性，我們可以實現(xiàn)一個簡單的餅狀圖，下面是一個基礎的示例：

1、創(chuàng)建一個HTML文件，包含以下內容：

<div class="pie-chart">
    <div class="pie-slice" style="--pie-value: 30%;"></div>
    <div class="pie-slice" style="--pie-value: 70%;"></div>
</div>

2、在CSS中，添加以下樣式：

.pie-chart {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #f0f0f0;
}
.pie-slice {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #f0f0f0;
}
.pie-slice::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #f0f0f0;
}

3、使用JavaScript來動態(tài)計算并設置每個餅狀圖的比例：

document.addEventListener("DOMContentLoaded", function() {
    var slices = document.querySelectorAll(".pie-slice");
    for (var i = 0; i < slices.length; i++) {
        var value = slices[i].style.getPropertyValue("--pie-value");
        var degrees = value * 360 / 100; // 將百分比轉換為度數(shù)
        slices[i].style.setProperty("transform", "rotate(" + degrees + "deg)"); // 旋轉餅狀圖以顯示比例
    }
});

在這個示例中，我們創(chuàng)建了一個包含兩個餅狀圖切片的餅狀圖，每個切片都有一個--pie-value屬性，表示其在餅狀圖中的比例，我們使用JavaScript來計算每個切片的度數(shù)，并將其旋轉到正確的位置，這只是一個簡單的示例，實際使用時可能需要更多的功能和樣式調整，但希望這個示例能幫助你開始使用純CSS來繪制餅狀圖。