使用漸變背景和偽元素，可以實現(xiàn)簡單的餅圖。其原理是：將漸變背景作為底色，再將主元素一半大小的偽元素覆蓋在主元素之上，并遮蓋住漸變背景中顯示比率的顏色。主元素中背景色和比率色各占一半，利用偽元素的旋轉(zhuǎn)來顯示出表示比率部分的顏色。

#a{
    width: 200px;
    height: 200px;
    margin: 200px auto;
    border-radius: 50%;
    overflow: hidden;
    background-color: yellowgreen;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
    position: relative;
}

加上覆蓋偽元素之后，虛線框表示偽元素的位置。將偽元素設(shè)置成剛好覆蓋比率色的半圓，并將旋轉(zhuǎn)對稱點設(shè)定為左邊的中點，這樣偽元素就會以主元素的圓心為對稱點進(jìn)行旋轉(zhuǎn)。

#a:after{
    content: "";
    display: block;
    outline: 1px dashed #333;
    border-radius: 0 100% 100% 0 / 50%;
    width: 50%;
    height: 100%;
    margin-left: 50%;
    background-color: inherit;
    transform-origin: left;
}

偽元素旋轉(zhuǎn)20%時。

transform: rotate(.2turn);

當(dāng)偽元素旋轉(zhuǎn)的度數(shù)大于50%時，比例圖會崩壞。

利用CSS3animation動畫可以解決這一問題，原理是：當(dāng)比率超過50%時，將偽元素的顏色改為比率色的顏色。一個從0到100%的比率動畫。

@keyframes ani {
    to { transform: rotate(.5turn) }
}
@keyframes bg {
    50% { background: #655 }
}
#a:after{
    /*outline: 1px dashed #333; */
    animation: ani 3s linear infinite,
               bg 6s step-end infinite; // step-end表示只顯示動畫每一步的結(jié)束幀，這里即讓偽元素的背景色在50%位置時發(fā)生突變。
}

利用以下簡單的HTML結(jié)構(gòu)顯示不同比率的靜態(tài)餅圖。

<div class="a">20%</div>
<div class="a">60%</div>

解決方案是讓偽元素的動畫靜止在相應(yīng)比率的位置，給動畫延遲animation-delay屬性設(shè)置一個負(fù)的值，表示動畫已經(jīng)播放了相應(yīng)的時間，將整個動畫的時間設(shè)置為100s，這樣60%的餅圖就是動畫靜止在已經(jīng)執(zhí)行了60s的位置。為了能根據(jù)結(jié)構(gòu)的內(nèi)容自動生成餅圖，要將animation-delay屬性設(shè)置在主元素的內(nèi)聯(lián)樣式中，因為偽元素?zé)o法設(shè)置內(nèi)聯(lián)樣式，所以在偽元素中使用animation-delay的繼承值。

<div class="a" style="animation-delay: -20s;">20%</div>
<div class="a" style="animation-delay: -60s;">60%</div>
#a:after{
    /*outline: 1px dashed #333; */
    animation: ani 50s linear infinite,
               bg 100s step-end infinite; 
animation-play-state: paused;
animation-delay: inherit;
}

利用JS獲取內(nèi)容的值，并將其轉(zhuǎn)化為內(nèi)聯(lián)樣式賦值給主元素，就可以實現(xiàn)任意比率的簡單餅圖。