我正在寻找一种使用CSS或SVG绘制圆圈底部的方法.我已经看过
this answer了,但它处理的是一个完美的半圈,而我需要一个额外的段来切断它使它不到一半.使用纯CSS可能无法实现,但SVG的答案对我来说很难修改.
<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>
解决方法
你可以用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>
您还可以拥有这两部分：
.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>
