由于我根本找不到令人满意的答案，因此我不得不屈服，使用剪切路径功能和整个CSS的星期日来终于得到我想要的东西。
您可以选择一个起始角度和一个结束角度，然后元素将很好地绘制出该角度，没有别的。您只需要边界半径解决方案即可绘制基圆。
我的解决方案使用四个多边形的网格，每个多边形提供一个可能的起点或终点，分别为0-90°。0-100％，90-180°。0-100％，依此类推，共享中心点，因此有两次乘以4段。您可以将机械装置视为具有多个段的望远镜杆，由于机械装置的缘故，每个段都执行从0到N的分段工作，同时仍在代码中保持一定的清晰度（0-90,90-180 ..），i必须手动将div旋转（-45deg），以便0°== 12''。
这是一个小草图，可以说明我是如何做到的：
请注意，您不能将此用于任何商业目的，因为我没有在网上找到任何类似的解决方案，因此，它需要具有一定的价值。请尊重这一点。
使用css von c绘制圆线段。schiefer ist lizenziert unter einer Creative Commons Namensnennung-Nicht kommerziell-Keine Bearbeitungen 4.0 International Lizenz。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.circle{
position: absolute;
top: 100px;
width: 600px;
height: 600px;
border-radius: 50%;
background-color: #FFFF00;
opacity: .9;
-webkit-transform: rotate(45deg);
}
<script type="text/javaScript">
var obj;
var start, end;
function rangeStart(val) {
obj = $("body").find(".circle");
start = val;
setAngle(obj, start, end);
}
function rangeEnd(val) {
obj = $("body").find(".circle");
end = val;
setAngle(obj, start, end);
}
function applyMasking(obj) {
obj.css("-webkit-clip-path", ptsToString());
}
var angie = 0;
function doit() {
obj = $("body").find(".circle");
if(angie < 360)
angie+=15;
else angie = 0;
setAngle(obj, 0, angie);
}
function ptsToString() {
var str = "";
str+="polygon(";
for(var i=0; i < pts.length; i++) {
str+=pts[i].x+"% ";
if(i != pts.length-1)
str+=pts[i].y+"% ,";
else str+=pts[i].y+"%";
}
str+=")";
return str;
}
var pts =
[
{x: 50, y: 50}, {x: 0, y: 0}, {x: 0, y: 0},
{x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0},
{x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}
];
var lb, ub;
var sa, ea;
function setAngle(obj, start, end) {
start = (start == undefined ? start = 0 : start);
lb = (angleToSector(start) * 2) - 1;
ub = angleToSector(end) * 2;
sa = mapAngleToPoint(start);
ea = mapAngleToPoint(end);
for(var i=1; i < pts.length; i++) {
if(i <= lb) { pts[i].x = sa.x; pts[i].y = sa.y; }
else if(i > lb && i < ub) {
pts[i] = setMax(i);
}
else if(i >= ub) { pts[i].x = ea.x; pts[i].y = ea.y; }
}
applyMasking(obj);
}
function angleToPerc(angle) {
return angle * (100/90);
}
function lowerBound(angle) {
return (mapAngleToSector(angle));
}
function uppperBound(angle){
return (mapAngleToSector(angle));
}
function angleToSector(angle) {
if (angle >= 0 && angle < 90) return 1;
else if (angle >= 90 && angle < 180) return 2;
else if (angle >= 180 && angle < 270) return 3;
else if (angle >= 270 && angle <= 360) return 4;
}
var as;
function mapAngleToPoint(angle) {
var pt = {x: 0, y: 0};
as = angleToSector(angle);
if(as == 1) {pt.x = angleToPerc(angle); pt.y = 0; }
else if(as == 2) {pt.x = 100; pt.y = angleToPerc(angle-90)}
else if(as == 3) {pt.x = 100-angleToPerc(angle-180); pt.y = 100; }
else if(as == 4) {pt.x = 0; pt.y = 100-angleToPerc(angle-270); }
return pt;
}
function setMax(index) {
var pt = {x: 0, y: 0};
if (index == 1 || index == 2) { pt.x = 100; pt.y = 0; }
else if (index == 3 || index == 4) { pt.x = 100; pt.y = 100; }
else if (index == 5 || index == 6) { pt.x = 0; pt.y = 100; }
else if (index == 7 || index == 8) { pt.x = 0; pt.y = 0; }
return pt;
}
</script>
</head>
<body>
<div class="circle">
</div>
<input type="range" name="rangeLower" value="0" min="0" max="360" onchange="rangeStart(this.value);">
<input type="range" name="rangeUpper" value="66"min="0" max="360" onchange="rangeEnd(this.value);">
</body>
