如何在CSS中画一个圆形扇区？
如何在CSS中画一个圆形扇区？
提问于 2014-01-18 22:50:00
那么，用纯CSS绘制一个圆是很容易的。
.circle {
width: 100px;
height: 100px;
border-radius: 100px;
border: 3px solid black;
background-color: green;
}如何绘制地段？给定一个度X 0-360，我想画一个X度扇区。我能用纯CSS做到这点吗？
例如：
感谢+示例
谢谢你，Jonathan，我用了第一种方法。如果它对某人有帮助，这里有一个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)');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21205652
复制相关文章
相似问题