Нарисовать круг с чистым 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%);
}
Ответ
Решение с толстой границей и stroke-dasharray
function setSector(part){
var radius = +$('.sector').attr('r'),
width = 2*Math.PI*radius,
result = width/100*part;
$('.sector').css('stroke-dasharray', result + ',' + width)
}
$('[type=number]').on('input', function(){
var part = +$(this).val();
setSector(part);
})
.border{
fill:none;
stroke:green;
stroke-width:1;
}
.sector{
fill:none;
stroke:green;
stroke-width:50;
}
label,
span{
display:block;
}
Комментариев нет:
Отправить комментарий