餅圖是數據可視化的一種重要方式，它能夠直觀地展示數據的占比關系，使得人們更容易地理解和分析數據。在Web開發中，我們可以用HTML和CSS來創建餅圖，下面是一個基本的餅圖HTML和CSS源代碼示例：

<div class="pie-chart">
<div class="pie-chart__holder">
<div class="pie-chart__segment pie-chart__segment--one"></div>
<div class="pie-chart__segment pie-chart__segment--two"></div>
<div class="pie-chart__segment pie-chart__segment--three"></div>
</div>
</div>
.pie-chart {
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.pie-chart__holder {
width: 100%;
height: 100%;
position: relative;
transform: rotate(-90deg);
}
.pie-chart__segment {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
border: 8px solid #eee;
clip: rect(0 100px 200px 0);
}
.pie-chart__segment--one {
border-color: #5e89a4;
transform: rotate(40deg);
}
.pie-chart__segment--two {
border-color: #df6c4f;
transform: rotate(140deg);
}
.pie-chart__segment--three {
border-color: #83c7a5;
transform: rotate(220deg);
}

這段代碼定義了一個div元素作為餅圖的容器，它包含一個內部div元素作為餅圖切片的容器。切片使用CSS的偽元素實現，每個切片對應一個類名，可以通過改變這些類名來改變餅圖的樣式。整個餅圖容器使用CSS中的border-radius屬性來實現圓形，同時使用box-shadow屬性添加陰影效果。

以上是一個簡單的餅圖HTML和CSS源代碼示例，通過它你可以了解到如何使用HTML和CSS來實現一個基本的餅圖。在實際的開發過程中，你可以根據需求和樣式要求來進行自定義，讓餅圖更加美觀和有趣。