Я бы использовал линейный / радиальный градиент
следующим образом:
.box {
width:200px;
height:200px;
border-radius:50%;
background:
linear-gradient(-30deg, white 50%,transparent 0),
linear-gradient(30deg, white 50%,transparent 0),
radial-gradient(circle at center,transparent 31%,blue 30%,blue 100%, transparent 51%);
}
<div class="box">
</div>
И с border
:
.box {
width:200px;
height:200px;
border-radius:50%;
background:
linear-gradient(to top,white 59%,transparent 0),
linear-gradient(-30deg, white calc(50% - 4px),green calc(50% - 4px),green 50%,transparent 0),
linear-gradient(30deg, white calc(50% - 4px),green calc(50% - 4px),green 50%,transparent 0),
radial-gradient(circle at center,transparent calc(30% - 4px),green calc(30% - 4px),green 30%,blue 30%,blue calc(70% - 3px),green 0);
}
<div class="box">
</div>
Вы также можете рассмотреть решение с SVG, которое может быть проще:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='300' height='300' fill='blue'>
<path stroke="green" stroke-width=1 d='M24 32 C28 28 37 28 40 32 L52 22 C38 8 26 8 12 22 Z' />
</svg>
Вот еще одна идея с clip-path
:
.box {
width:200px;
height:200px;
border-radius:50%;
background:
radial-gradient(circle at center,transparent 31%,blue 30%,blue 100%, transparent 51%);
-webkit-clip-path: polygon(0 0, 50% 50%, 100% 0);
clip-path: polygon(0 0, 50% 50%, 100% 0);
}
<div class="box">
</div>