用css实现饼图效果

使用纯CSS来创建饼图是一个有趣且富有挑战性的任务。虽然CSS不是专门用于创建图表的工具（通常我们会使用JavaScript库，如Chart.js或D3.js），但你还是可以通过一些CSS技巧和HTML结构来实现基本的饼图效果。

以下是一个简单的示例，展示如何使用CSS来创建一个基本的饼图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pie Chart</title>
    <style>
        .pie {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: red;
            clip-path: inset(50% 0 0 0);
        }
        .pie::before {
            content: "";
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            border-radius: 50%;
            background: blue;
            transform-origin: 50% 100%;
            transform: rotate(120deg); /* Adjust this value to change the pie slice */
        }
        .pie::after {
            content: "";
            position: absolute;
            top: 0; left: 50%;
            width: 50%; height: 100%;
            border-radius: 0 100% 100% 0 / 50%;
            background: inherit;
            transform-origin: 0 50%;
        }
    </style>
</head>
<body>
    <div class="pie"></div>
</body>
</html>