要使用CSS画一个甜甜圈（Donut Chart），你可以利用CSS的border-radius属性以及伪元素。不过，这种方法只能创建简单的甜甜圈样式，并不能实现复杂的数据可视化。如果你需要更高级的功能，建议使用专门的图表库，如Chart.js或D3.js。
以下是一个简单的CSS甜甜圈示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Donut</title>
<style>
.donut {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f0f0f0;
border: 5px solid #333;
margin: 50px;
}
.donut::before {
content: "";
position: absolute;
top: 50%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background-color: #ff6347; /* 你可以更改这个颜色 */
transform: translateY(-50%);
clip-path: inset(0 0 0 50%); /* 这将创建一个半圆形的切片 */
}
</style>
</head>
<body>
<div class="donut"></div>
</body>
</html>
这个示例创建了一个简单的甜甜圈，其中一半被填充了颜色。你可以通过调整clip-path属性的值来改变填充部分的大小。例如，clip-path: inset(0 0 0 75%);将使填充部分占据圆圈的25%。
请注意，CSS的这种方法在创建复杂的甜甜圈图表时可能不够灵活。对于更复杂的需求，建议使用JavaScript图表库。
标签：甜甜,50%,radius,css,使用,path,border,CSS From： https://www.cnblogs.com/ai888/p/18651577