如何在 CSS 中绘制一个圆形扇区？
用纯 CSS 画一个圆很容易。
.circle {
width: 100px;
height: 100px;
border-radius: 100px;
border: 3px solid black;
background-color: green;
}
如何画扇区? 给定一个 X 度[0-360] ，我想画一个 X 度扇区。 我能用纯 CSS 做到吗？
例如:
谢谢 + 例子
谢谢你，乔纳森，我用了第一种方法。这里有一个 JQuery 函数的例子，它可以得到百分比并绘制扇区。扇区位于百分比圆的后面，这个例子展示了如何从一个起始度实现一个圆周的圆弧。
$(function drawSector() {
var activeBorder = $("#activeBorder");
var prec = activeBorder.children().children().text();
if (prec > 100)
prec = 100;
var deg = prec * 3.6;
if (deg <= 180) {
activeBorder.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
} else {
activeBorder.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
}
var startDeg = $("#startDeg").attr("class");
activeBorder.css('transform', 'rotate(' + startDeg + 'deg)');
$("#circle").css('transform', 'rotate(' + (-startDeg) + 'deg)');
});.container {
width: 110px;
height: 110px;
margin: 100px auto;
}
.prec {
top: 30px;
position: relative;
font-size: 30px;
}
.prec:after {
content: '%';
}
.circle {
position: relative;
top: 5px;
left: 5px;
text-align: center;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #E6F4F7;
}
.active-border {
position: relative;
text-align: center;
width: 110px;
height: 110px;
border-radius: 100%;
background-color: #39B4CC;
background-image: linear-gradient(91deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="container">
<div id="activeBorder" class="active-border">
<div id="circle" class="circle">
<span class="prec">66</span>
<span id="startDeg" class="90"></span>
</div>
</div>
</div>$(function drawSector() {
// Get degrees
...
// Draw a sector
if (deg <= 180) {
activeBorder.css('background-image', 'linear-gradient(' + (90+deg) + 'deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
}
else {
activeBorder.css('background-image', 'linear-gradient(' + (deg-90) + 'deg, transparent 50%, #39B4CC 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
}
// Rotate to meet the start degree
activeBorder.css('transform','rotate(' + startDeg + 'deg)');
});
最佳答案