1.利用echarts实现

直接上源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扇形图实例</title>
</head>
<body>

</body>
</html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="UTF-8" />
    <title>Pie</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
    <style type="text/css">
        html {
            height: 100%;
            margin: 0;
        }

        body {
            height: 100%;
            margin: 0;
        }
        #main{
            background-color: rgb(2,15,14, 0.7);
        }
    </style>
</head>
<body>
<div id="main" style="width: 100%;height:100%;">
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var data = {
        "data_pie" : [
            {"value":50, "name":"#1"},
            {"value":50, "name":"#2"},
            {"value":50, "name":"#3"},
            {"value":50, "name":"#4"},
            {"value":50, "name":"#5"}
        ]
    };
    myChart.setOption({
        title: {
            text: '扇形图展示',
            subtext: '测试数据',
            left: 'center'
        },//标题
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },//鼠标移入属性
        series: [
            {
                name:'第一圈',
                type:'pie',
                label: {
                    normal: {
                        show: false,
                    }
                },
                center: ['50%','60%'],
                radius: ['0%', '40%'],
                data: data.data_pie
            },
            {
                name: '第二圈',
                type: 'pie',
                radius: ['40.2%', '55%'],
                label: {
                    normal: {
                        show: false,
                    }
                },
                center: ['50%','60%'],
                data: data.data_pie
            },
            {
                name: '第三圈',//pie名称
                type: 'pie',//形状类型
                radius: ['55.2%','80%'],//扇形
                center: ['50%', '60%'],//图形位置
                data: data.data_pie//数据源
            }
        ]
    });
</script>
</body>
</html>

效果如图：

2.css3实现

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用css3绘制任意角度扇形</title>
    <style>
        .pie {
            position: relative;
            margin: 1em auto;
            padding: 0;
            width: 32em;
            height: 32em;
            border-radius: 100%;
            list-style: none;
            overflow: hidden;
            border: 1px solid #eeeeee;
            transform: rotate(0deg); /*针对mac safari浏览器兼容*/
        }
        .pie .pie2 {
            position: relative;
            margin-top: 1em;
            margin-right: auto;
            margin-bottom: 1em;
            margin-left: auto;
            padding-top: 75px;
            padding-right: 75px;
            padding-bottom: 0px;
            padding-left: 0px;
            width: 25em;
            height: 25em;
            border-radius: 100%;
            list-style: none;
            overflow: hidden;
            background-color: rgba(254,254,5,0.05);
            border: 1px solid yellow;
            transform: rotate(0deg); /*针对mac safari浏览器兼容*/
        }
        .pie .pie2 .pie3{
            position: relative;
            margin-top: 20px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 92px;
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            width: 18em;
            height: 18em;
            border-radius: 100%;
            list-style: none;
            overflow: hidden;
            background-color: rgba(152,203,204,0.05);
            border: 1px solid rgba(152,203,204,0.7);
            transform: rotate(0deg); /*针对mac safari浏览器兼容*/
        }
        .slice {
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 50%;
            transform-origin: 0% 100%;
        }
        .slice-1 {
             border: 1px solid #eeeeee;
        }
        .slice-2 {
            transform: rotate(-72deg) skewY(-54deg);
            border: 1px solid #eeeeee;
        }
        .slice-3 {
            transform: rotate(-108deg) skewY(-54deg);
            border: 1px solid #eeeeee;
        }
        .slice-4 {
            transform: rotate(-144deg) skewY(-54deg);
            border: 1px solid #eeeeee;
        }
        .slice-5 {
            border: 1px solid #eeeeee;
            transform: rotate(-180deg) skewY(-54deg);
        }
        .slice-6 {
            border: 1px solid #eeeeee;
            transform: rotate(-216deg) skewY(-54deg);
        }
        .slice-7 {
            border: 1px solid #eeeeee;
            transform: rotate(-252deg) skewY(-54deg);
        }
        .slice-8 {
            border: 1px solid #eeeeee;
            transform: rotate(-288deg) skewY(-54deg);
        }
        .slice-9 {
            border: 1px solid #eeeeee;
            transform: rotate(-324deg) skewY(-54deg);
        }
        .slice-10 {
            border: 1px solid #eeeeee;
            transform: rotate(-360deg) skewY(-54deg);
        }

        .slice2-1 {
             border: 1px solid yellow;
        }
        .slice2-2 {
            transform: rotate(-72deg) skewY(-54deg);
            border: 1px solid yellow;
        }
        .slice2-3 {
            transform: rotate(-108deg) skewY(-54deg);
            border: 1px solid yellow;
        }
        .slice2-4 {
            transform: rotate(-144deg) skewY(-54deg);
            border: 1px solid yellow;
        }
        .slice2-5 {
            border: 1px solid yellow;
            transform: rotate(-180deg) skewY(-54deg);
        }
        .slice2-6 {
            border: 1px solid yellow;
            transform: rotate(-216deg) skewY(-54deg);
        }
        .slice2-7 {
            border: 1px solid yellow;
            transform: rotate(-252deg) skewY(-54deg);
        }
        .slice2-8 {
            border: 1px solid yellow;
            transform: rotate(-288deg) skewY(-54deg);
        }
        .slice2-9 {
            border: 1px solid yellow;
            transform: rotate(-324deg) skewY(-54deg);
        }
        .slice2-10 {
            border: 1px solid yellow;
            transform: rotate(-360deg) skewY(-54deg);
        }

        .slice3-1 {
             border: 1px solid  rgba(152,203,204,0.7);
        }
        .slice3-2 {
            transform: rotate(-72deg) skewY(-54deg);
            border: 1px solid  rgba(152,203,204,0.7);
        }
        .slice3-3 {
            transform: rotate(-108deg) skewY(-54deg);
            border: 1px solid  rgba(152,203,204,0.7);
        }
        .slice3-4 {
            transform: rotate(-144deg) skewY(-54deg);
            border: 1px solid  rgba(152,203,204,0.7);
        }
        .slice3-5 {
            border: 1px solid  rgba(152,203,204,0.7);
            transform: rotate(-180deg) skewY(-54deg);
        }
        .slice3-6 {
            border: 1px solid  rgba(152,203,204,0.7);
            transform: rotate(-216deg) skewY(-54deg);
        }
        .slice3-7 {
            border: 1px solid  rgba(152,203,204,0.7);
            transform: rotate(-252deg) skewY(-54deg);
        }
        .slice3-8 {
            border: 1px solid  rgba(152,203,204,0.7);
            transform: rotate(-288deg) skewY(-54deg);
        }
        .slice3-9 {
            border: 1px solid  rgba(152,203,204,0.7);
            transform: rotate(-324deg) skewY(-54deg);
        }
        .slice3-10 {
            border: 1px solid  rgba(152,203,204,0.7);
            transform: rotate(-360deg) skewY(-54deg);
        }
    </style>
</head>
    <body>
        <ul class='pie'>
            <li class='slice-1 slice'> </li>
            <li class='slice-2 slice'> </li>
            <li class='slice-3 slice'> </li>
            <li class='slice-4 slice'> </li>
            <li class='slice-5 slice'> </li>
            <li class='slice-6 slice'> </li>
            <li class='slice-7 slice'> </li>
            <li class='slice-8 slice'> </li>
            <li class='slice-9 slice'> </li>
            <li class='slice-10 slice'></li>
            <ul class='pie2'>
                <li class='slice2-1 slice'> </li>
                <li class='slice2-2 slice'> </li>
                <li class='slice2-3 slice'> </li>
                <li class='slice2-4 slice'> </li>
                <li class='slice2-5 slice'> </li>
                <li class='slice2-6 slice'> </li>
                <li class='slice2-7 slice'> </li>
                <li class='slice2-8 slice'> </li>
                <li class='slice2-9 slice'> </li>
                <li class='slice2-10 slice'></li>
                <ul class='pie3'>
                    <li class='slice3-1 slice'> </li>
                    <li class='slice3-2 slice'> </li>
                    <li class='slice3-3 slice'> </li>
                    <li class='slice3-4 slice'> </li>
                    <li class='slice3-5 slice'> </li>
                    <li class='slice3-6 slice'> </li>
                    <li class='slice3-7 slice'> </li>
                    <li class='slice3-8 slice'> </li>
                    <li class='slice3-9 slice'> </li>
                    <li class='slice3-10 slice'></li>
                </ul>
            </ul>
        </ul>
    </body>
</html>