基于CSS，SVG，Canvas画扇形

扇形

使用css属性

使用css画一个三角形很容易，只要调整div的border属性即可。https://blog.csdn.net/qq_40312477/article/details/124167411?spm=1001.2014.3001.5502

在此基础上，增加border-radius即可画出一个45deg的扇形。

<div class="shang"></div>

.shang {
            width: 0;
            height: 0;
            border: 200px solid transparent;
            border-top-color: red;
            border-radius: 50%;
        }

使用svg

用svg就比较简单了，利用它的path标签，使用椭圆弧 （A）即可实现弧线。

<svg width="500" height="500">
        <path d="M250 500 L250 250 A250 250 30 0 1 375.5 283 Z" stroke="#000" stroke-width="1" fill="red"></path>
</svg>

使用canvas

和svg差不多，画出对应的路径即可

<canvas width="500" height="500" class="my-canvas"></canvas>

        // ctx.beginPath();
        // ctx.strokeStyle = 'pink';
        // ctx.moveTo(250,250);
        // ctx.lineTo(250,0);
        // ctx.arc(250,250,250,1.5*Math.PI,0,false);//画弧线
        // ctx.closePath();
        // ctx.stroke();