如何使用css仅为圆圈底部的10%上色？
如何使用css仅为圆圈底部的10%上色？
提问于 2016-10-14 19:08:51
如何使用css为仅有10%的圆圈底部着色？
回答 7
Stack Overflow用户
发布于 2016-10-14 19:37:26
最简单的解决方案是使用方框阴影的第二个边界和绝对定位的10%填充元素。
以下是代码片段示例：
.circle {
display: inline-block;
width: 250px;
height: 250px;
border-radius: 50%;
border: 10px solid white;
text-align: center;
line-height: 250px;
overflow: hidden;
padding: 3px;
position: relative;
box-sizing: border-box;
box-shadow: 0 0 0 10px gray;
margin: 50px
}
.fill {
background-color: teal;
height: 10%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}<div class="circle">
<span class="text">text</span>
<div class="fill"></div>
</div>
还有一把小提琴：https://jsfiddle.net/0ryjh4xd/2/
Stack Overflow用户
发布于 2016-10-14 19:45:27
.circle-border{
border-radius: 50%;
border: 8px solid #E6E6E6;
padding: 20px;
width: 200px;
height: 200px;
}
.text{
position: relative;
top: 15%;
text-align: center;
font-size: 16px;
color: #666;
font-family: Arial;
}
.semi-circle{
position: relative;
top:25%;
background-color: #00C0A4;
width: 200px;
height: 70px;
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transform: rotate(180deg);
}<div class="circle-border">
<div class="text">
<p>₹ 1500 to ₹ 10000</p>
<p>used this month</p>
</div>
<div class="semi-circle"></div>
</div>
我已经在圆内放置了一个半圆。这是我的解决方案。
<style>
.circle-border{
border-radius: 50%;
border: 8px solid #E6E6E6;
padding: 20px;
width: 200px;
height: 200px;
}
.text{
position: relative;
top: 15%;
text-align: center;
font-size: 16px;
color: #666;
font-family: Arial;
}
.semi-circle{
position: relative;
top:25%;
background-color: #00C0A4;
width: 200px;
height: 70px;
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transform: rotate(180deg);
}
</style>
<div class="circle-border">
<div class="text">
<p>₹ 1500 to ₹ 10000</p>
<p>used this month</p>
</div>
<div class="semi-circle"></div>
</div>Stack Overflow用户
发布于 2016-10-14 19:16:32
对overflow: hidden使用内圈和外圈。放置一些其他元素作为部分颜色
.circle {
width: 102px;
height: 102px;
border-radius: 50%;
padding-top: 2px;
padding-left: 2px;
background-color: gray;
}
.circle-inner {
background-color: white;
border-radius: 50%;
width: 96px;
height: 96px;
overflow: hidden;
position: relative;
border: 2px solid white;
}
.circle-inner:after {
width: 100%;
height: 20px;
position: absolute;
left: 0;
bottom: 0;
background-color: #00aa00;
content: '';
display: inline-block;
}<div class="circle">
<div class="circle-inner">
<span></span>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40041688
复制相关文章
相似问题
腾讯云开发者
