CSS畫餅狀圖可以使用偽元素和CSS3的轉換實現，具體實現方法如下：

.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;
}

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

同時，可以通過CSS3的過渡效果實現鼠標懸浮時扇形的變換。代碼如下：

.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;
}

以上代碼實現了鼠標懸浮時餅狀圖扇形的變換效果，使用了transition屬性控制變換的過渡效果。

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