CSS餅狀圖是網頁設計中常用的一種圖表展示方式，它可以幫助我們直觀、美觀地展示數據比例。下面是CSS餅狀圖的制作方法。

<div class="pie">
<div class="left half-circle"></div>
<div class="right half-circle"></div>
<div class="center-circle"></div>
</div>
<style>
.pie {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
}
.half-circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff7800;
border-radius: 100% 0 0 100%;
transform-origin: 100% 50%;
overflow: hidden;
}
.right {
z-index: 10;
transform: rotate(180deg);
border-radius: 0 100% 100% 0;
}
.center-circle {
z-index: 100;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: white;
border-radius: 100%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.half-circle:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background-color: white;
border-radius: 50%;
transform: translateX(-25%);
}
.right:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background-color: #ff8c2e;
border-radius: 50%;
transform: translateX(-125%) rotate(-180deg);
}
</style>

以上代碼中，我們首先定義了一個div容器，并為其設置了特定的寬度、高度和居中對齊方式。接著，我們分別定義了左邊、右邊、中心的半圓形。我們使用絕對定位將左右半圓形置于容器頂部，使其覆蓋中心區域，并使用圓角屬性制作出半圓形效果。同時，我們還使用了transform-origin屬性指定了旋轉中心為半徑起點，同時對右半圓形進行了180度的旋轉，使其圓弧部分與左半圓形粘合形成一個完整的圓形區域。

最后，在半圓形元素內部嵌入一個after偽元素，并定義了其大小與樣式，用以在圓形區域內顯示具體的數值或信息。

以上便是制作CSS餅狀圖的基本方法，通過合理的調整樣式和數據，我們可以更加美觀和直觀的展示所需信息。希望大家可以從中受益，制作出更為精美的網頁效果。