环状百分比是一种用于展示百分比比例的图形。在CSS3中，我们可以利用transform和border-radius属性以及伪类选择器来实现环状百分比的效果。

.percent-circle {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ddd;
}
.percent-circle:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 50px, 100px, 0);
background-color: #007bff;
transform-origin: 0 50px;
}
.percent-circle:after {
content: attr(data-percent) "%";
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: #444;
}

上面的代码中，我们首先定义了一个.percent-circle的容器，利用border-radius实现了圆形的效果。然后利用伪类选择器:before，绘制了一个蓝色的半圆形，这里利用了CSS3中的clip属性，将整个圆形容器剪切为半圆形，然后利用transform-origin属性将旋转中心点设置在圆弧起点。

最后，我们利用伪元素:after来展示百分比数值。我们将百分比数值存储在data-percent属性中，并利用content: attr(data-percent) "%"将其作为伪元素的内容展示出来。

通过以上的代码，我们就可以实现一个简单的环状百分比图形了。需要注意的是，在实际使用时，我们需要通过JavaScript等方式来给data-percent属性设置具体的数值。