Eu estou procurando uma maneira de desenhar a parte inferior deste círculo usando CSS ou SVG. esta resposta mas trata-se de um meio círculo perfeito, enquantoEu preciso de um segmento extra cortado para torná-lo um pouco menos da metade. Provavelmente não é possível com CSS puro, mas a resposta do SVG fica complicada para eu modificar.
<svg class="pie">
<circle cx="115" cy="115" r="110"></circle>
<path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path>
</svg>
Respostas:
6 para resposta № 1Você pode fazer isso com CSS:
.partial-circle {
position: relative;
height: 20px;
width: 100px;
overflow: hidden;
}
.partial-circle:before {
content: "";
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
bottom: 0;
background: #D08707;
}<div class="partial-circle"></div>Você também pode ter as duas partes:
.partial-circle {
position: relative;
width: 100px;
overflow: hidden;
}
.partial-circle:before {
content: "";
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
}
.partial-circle.top {
height: 80px;
}
.partial-circle.bottom {
height: 20px;
}
.partial-circle.top:before {
top: 0;
background: #E19B21;
}
.partial-circle.bottom:before {
bottom: 0;
background: #D08707;
}<div class="partial-circle top"></div>
<div class="partial-circle bottom"></div>14 para resposta № 2
Por que não usar dois path elementos com um comando de arco?
<svg width="135" height="135">
<path d="M125,85 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half-->
<path d="M10,85 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>Você pode separá-los facilmente.
<svg width="135" height="135">
<path d="M125,80 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half-->
</svg>
<svg width="135" height="135">
<path d="M10,80 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>
<svg width="135" height="135">
<path d="M10,0 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>