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饼状图的基本方法，通过合理的调整样式和数据，我们可以更加美观和直观的展示所需信息。希望大家可以从中受益，制作出更为精美的网页效果。