css画饼图 |css 可编辑表格

/* 首先定义一个class为circle的div容器 */
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
border: 10px solid gray;
position: relative;
}
/* 然后定义饼图的各个部分 */
.circle:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip: rect(0, 40px, 80px, 0);
border-radius: 50%;
background-color: red;
transform: rotate(30deg);
}
.circle:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip: rect(0 0 80px 40px);
border-radius: 50%;
background-color: blue;
transform: rotate(90deg);
}

上述代码中，大家首先定义了一个class为circle的div容器，并设置了它的大小和圆角半径。然后，大家使用:before和:after伪元素来定义饼图的两个部分，并设置了它们相对于容器的位置、大小和颜色。大家还使用了clip属性来指定伪元素的形状，使用transform属性来旋转伪元素，使得其能够呈现出饼状的效果。

有了上述代码，大家就可以创建出一个简单的饼图了。

<div class="circle"></div>

饼图是数据可视化中必不可少的一种展示方式，而CSS画饼图则为大家提供了一种简单、快捷的方法。当然，如果需要绘制更复杂的饼图，大家还需要使用其他的技术来辅助。希望这篇文章能够对大家有所帮助。