CSS是網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)中必不可少的一部分，如何在其中應(yīng)用css來(lái)制作餅圖？

首先，我們需要一個(gè)div作為容器，并設(shè)置寬度和高度。接下來(lái)，通過(guò)偽元素:before來(lái)繪制圖形的底部，同時(shí)設(shè)置為一個(gè)半圓。代碼如下：

.pie {
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
overflow: hidden;
margin: 30px auto;
}
.pie:before {
content: '';
display: block;
width: 100px;
height: 200px;
border-radius: 100px 100px 0 0;
background-color: #f1f1f1;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -50px;
}

接著，在容器內(nèi)插入三個(gè)同樣大小的div，且位置相互重合。然后，分別給每一個(gè)div設(shè)置寬度和高度，同時(shí)設(shè)置border-radius為50%，使得它們成為半圓形。接下來(lái)，給每一個(gè)div分別添加不同的背景顏色，并且通過(guò)transform屬性來(lái)讓它們旋轉(zhuǎn)，來(lái)構(gòu)成餅圖。代碼如下：

.pie .pie1, .pie .pie2, .pie .pie3 {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
transform-origin: center center;
clip: rect(0px, 200px, 200px, 100px);
}
.pie .pie1 {
background-color: #f00;
transform: rotate(0deg);
}
.pie .pie2 {
background-color: #0f0;
transform: rotate(120deg);
}
.pie .pie3 {
background-color: #00f;
transform: rotate(240deg);
}

通過(guò)以上的代碼，我們便可以構(gòu)建出一個(gè)簡(jiǎn)單的餅圖。當(dāng)然，對(duì)于更復(fù)雜的餅圖，我們需要調(diào)整不同的角度并設(shè)置不同的顏色，以達(dá)到不同的效果。