Html 如何在CSS中绘制具有起点和终点位置（以度为单位）的圆扇区

我正在尝试创建一个圆形扇区。该扇区应在CSS中构建，起始位置和结束位置以度为单位

例如：

startPosition:155deg；末端位置：245度


我试图在这里找到这个问题的答案：

但是没有一个答案真的对我有帮助

这是到目前为止我的代码（）：


.pivot控件{
浮动：左；
位置：相对位置；
}
.pivot控件.pivot容器{
边界半径：50%；
边框样式：实心；
边框宽度：3倍；
边框颜色：#2e3d5d；
框大小：边框框；
背景色：#bcd0e7；
宽度：76px；
高度：76px；
}
.轴控件.轴容器.轴圆{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
.pivot控件。pivot容器。pivot圆。pivot手{
位置：相对位置；
背景：#228ad5；
高度：38px；
左：49%；
排名：0；
变换原点：50%100%；
宽度：2倍；
盒影：0-2px02px#fafafa；
}

像这样的东西？
如果需要使用按钮控制动画，只需将动画规则放在单独的类中并切换该类即可


.pivot控件{
浮动：左；
位置：相对位置；
}
.枢轴容器{
边界半径：50%；
边框样式：实心；
边框宽度：3倍；
边框颜色：#2e3d5d；
框大小：边框框；
背景色：#bcd0e7；
宽度：76px；
高度：76px；
}
.枢轴圈{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
.旋转手{
位置：相对位置；
背景：#228ad5；
高度：38px；
左：49%；
排名：0；
变换原点：50%100%；
宽度：2倍；
盒影：0-2px02px#fafafa；
动画：旋转动画3s；
变换：旋转（245度）；
}
@关键帧旋转动画{
0% {
变换：旋转（155度）；
}
100% {
变换：旋转（245度）；
}
}

选项1
这里的片段


div{
宽度：5em；
身高：5公分；
显示：块；
边界半径：50%；
背景颜色：绿色；
边框：2倍纯绿；
浮动：左；
边缘：1米；
}
.测试{
背景图像：
/*将90度添加到245度，以使端点*/
线性梯度（335度，透明50%，#bcd0e7 50%），
/*将90度添加到155度，以使起点*/
线性梯度（245度，#bcd0e7 50%，透明50%）；
}
谢谢。很好的动画，但我需要颜色的部分（轴通过）不错！我试着用css指令在30度到250度之间给部分上色，但不幸的是，它没有给正确的部分上色..测试{背景图像：/*添加90到245度，以使终点达到250*/线性渐变（160度，透明50%，bcd0e7 50%），/*将90度添加到300度，以将起点设置为30度*/线性渐变（300度，#bcd0e7 50%，透明50%）；）