我需要一个从底部开始有一半边框的圆,我想按百分比用颜色填充这个圆。
我需要在该圆上放置另一个圆,但是另一个圆的中心上有一个透明的形状。
首先我需要一个带有半边框的圆,然后在其上放一个透明形状的圆
有没有更简单的方法,例如使用画布?
.circle {
width: 80px;
height: 80px;
margin-left: 0;
border: 1px solid #E0E0E0;
border-radius: 100%;
background-color: transparent;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
.example {
background: linear-gradient(transparent 20%, #00EFAF 20%);
}
<div class="circle example" data-fill="50">
</div>
答案 0 :(得分:2)
您可以结合使用遮罩和渐变来实现此目的:
.box {
--b: 10px; /* 10px of visible border */
width:150px;
height:150px;
display:inline-block;
border-radius:50%;
background:linear-gradient(transparent calc(100% - var(--fill)),#00EFAF 0);
-webkit-mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
}
body {
background:#f2f2f2;
}
<div class="box" style="--fill:20%"></div>
<div class="box" style="--fill:50%;--b:20px;"></div>
<div class="box" style="--fill:80%;--b:5px;"></div>
将其用作伪元素可轻松在其中添加内容:
.box {
--b: 10px; /* 10px of visible border */
width:150px;
height:150px;
display:inline-flex;
justify-content:center;
align-items: center;
font-size:30px;
border-radius:50%;
overflow:hidden;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(transparent calc(100% - var(--fill)),#00EFAF 0);
-webkit-mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
}
body {
background:#f2f2f2;
}
<div class="box" style="--fill:20%">20%</div>
<div class="box" style="--fill:50%;--b:20px;">50%</div>
<div class="box" style="--fill:80%;--b:5px;">80%</div>
如果要执行动画,可以如下调整线性渐变
.box {
--b: 10px; /* 10px of visible border */
width:150px;
height:150px;
display:inline-flex;
justify-content:center;
align-items: center;
font-size:30px;
border-radius:50%;
overflow:hidden;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(#00EFAF,#00EFAF) content-box;
padding-top:calc(100% - var(--fill));
transition:0.5s;
-webkit-mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));
}
.box:hover::before {
padding-top:0%;
}
body {
background:#f2f2f2;
}
<div class="box" style="--fill:20%">20%</div>
<div class="box" style="--fill:50%;--b:20px;">50%</div>
<div class="box" style="--fill:80%;--b:5px;">80%</div>
这是使用clip-path
.box {
width:150px;
height:150px;
display:inline-flex;
justify-content:center;
align-items: center;
font-size:30px;
overflow:hidden;
position:relative;
z-index:0;
}
.box::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:var(--b,10px) solid #00EFAF;
border-radius:50%;
clip-path:
polygon(0 calc(100% - var(--fill)),
100% calc(100% - var(--fill)),
100% 100%,
0 100%);
transition:0.5s;
}
.box:hover::before {
clip-path:
polygon(0 0,
100% 0,
100% 100%,
0 100%);
}
body {
background:#f2f2f2;
}
<div class="box" style="--fill:20%">20%</div>
<div class="box" style="--fill:50%;--b:20px;">50%</div>
<div class="box" style="--fill:80%;--b:5px;">80%</div>