CSS3 圓餅圖是一種常用的圖形展示方式，可以將數(shù)據(jù)以旋轉的圓餅圖形進行直觀的展示。使用 CSS3 圓餅圖，我們可以輕松地制作出美觀實用的圖形效果，下面就來學習一下如何制作 CSS3 圓餅圖。

/* CSS3 圓餅圖的HTML結構 */
/* CSS3 圓餅圖的樣式 */
.pie-chart {
margin: 0 auto;
width: 200px;
height: 200px;
position: relative;
transform: rotate(-90deg);
}
.pie-chart__slice {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 100px, 100px, 50px);
}
.color-1 {
background-color: #fbb86d;
transform: rotate(60deg);
}
.color-2 {
background-color: #8d6e63;
transform: rotate(120deg);
}
.color-3 {
background-color: #2196f3;
transform: rotate(180deg);
}
.color-4 {
background-color: #4caf50;
transform: rotate(240deg);
}
.color-5 {
background-color: #e91e63;
transform: rotate(300deg);
}
.color-6 {
background-color: #9e9e9e;
transform: rotate(360deg);
}

通過上面的代碼，我們可以看出，我們需要先定義一個容器元素 .pie-chart，然后在容器內放置各個扇形，通過不同顏色的扇形來表示不同的數(shù)據(jù)。其中，每個扇形使用 clip 屬性截取矩形區(qū)域，將其轉換成一個扇形區(qū)域，然后使用 transform 屬性將其旋轉至對應的位置。

使用 CSS3 圓餅圖，可以幫助我們快速而有效地展示數(shù)據(jù)，同時還可以提升頁面的美觀程度，是一種值得學習和使用的圖形展示方式。