Подскажите пожалуйста, как можно сверстать этот элемент (именно круг). Подразумевается, что он должен быть динамическим
1 ответ
Вот что-то похоже, надеюсь помог
.circle {
--p: 20;
width: 200px;
aspect-ratio: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
font-size: 25px;
font-weight: bold;
font-family: consolas;
}
.circle:before {
content: "";
position: absolute;
border-radius: 50%;
inset: 0;
z-index: -1;
background: conic-gradient(green calc(var(--p)*1%), #0000 0);
-webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - 20px), #000 calc(100% - 20px));
mask: radial-gradient(farthest-side, #0000 calc(99% - 20px), #000 calc(100% - 20px));
}
<div class="circle" style="--p:30"> 30%</div>