<div class="container">
<div class="container__percentages">
...
</div>
<div class="container__curve">
<div class="container__half container__half--first"></div>
<div class="container__half container__half--second"></div>
</div>
</div>
.container {
position: relative;
}
.container__percentages {
align-items: center;
display: flex;
justify-content: center;
border: 12px solid rgba(0, 0, 0, 0.3);
border-radius: 9999px;
height: 128px;
width: 128px;
}
.container__curve {
left: 0;
position: absolute;
top: 0;
height: 100%;
width: 100%;
clip: rect(0px, 128px, 128px, 64px);
clip: rect(auto, auto, auto, auto);
}
.container__half {
height: 100%;
position: absolute;
width: 100%;
border: 12px solid rgb(0, 68, 158);
border-radius: 9999px;
}
.container__half--first {
clip: rect(0px, 64px, 128px, 0px);
transform: rotate(162deg);
}
.container__half--second {
clip: rect(0px, 64px, 128px, 0px);
transform: rotate(0deg);
transform: rotate(180deg);
}