CSS畫餅狀圖可以使用偽元素和CSS3的轉(zhuǎn)換實(shí)現(xiàn)，具體實(shí)現(xiàn)方法如下：

.pie-chart {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: #eee;
}
.pie-chart:before, .pie-chart:after {
position: absolute;
content: '';
border-radius: 50%;
}
.pie-chart:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f00;
clip: rect(0, 100px, 200px, 0);
transform: rotate(0deg);
z-index: 20;
}
.pie-chart:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0f0;
clip: rect(0, 200px, 200px, 100px);
transform: rotate(180deg);
z-index: 10;
}

以上代碼實(shí)現(xiàn)了一個半徑為100px的餅狀圖，其中偽元素:before代表了紅色部分，偽元素:after代表了綠色部分。通過clip屬性可以控制偽元素的顯示區(qū)域，從而實(shí)現(xiàn)餅狀圖的效果。需要注意的是，clip屬性在不同瀏覽器間的兼容性有差異，可以根據(jù)需求使用其他方式實(shí)現(xiàn)。

同時，可以通過CSS3的過渡效果實(shí)現(xiàn)鼠標(biāo)懸浮時扇形的變換。代碼如下：

.pie-chart:hover:before {
clip: rect(0, 200px, 200px, 0);
transform: rotate(180deg);
transition: all 0.5s ease-in-out;
}
.pie-chart:hover:after {
clip: rect(0, 200px, 200px, 0);
transform: rotate(0deg);
transition: all 0.5s ease-in-out;
}

以上代碼實(shí)現(xiàn)了鼠標(biāo)懸浮時餅狀圖扇形的變換效果，使用了transition屬性控制變換的過渡效果。

通過以上代碼，可以輕松地用CSS畫出漂亮的餅狀圖。