如何用css只为10％的圆底颜色？

时间：2016-10-14 11:08:51

标签： jquery css css3

如何使用css为圆圈的唯一10％底色？ enter image description here

7 个答案:

答案 0 :(得分：2)

最简单的解决方案是使用框阴影作为第二个边框，使用绝对定位的元素进行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/

答案 1 :(得分：1)

.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>&#8377 1500 to &#8377 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>&#8377 1500 to &#8377 10000</p>
        <p>used this month</p>
    </div>
    <div class="semi-circle"></div>
</div>

答案 2 :(得分：0)

将内圈和外圈与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>

答案 3 :(得分：0)

我使用了伪元素。如果填充颜色是静态的，这将起作用。

＆＃13;
＆＃13; 
.circle{
  border:3px solid #dfdfdf;
  height:50px;
  width:50px;
  position:relative;
  border-radius:50%;
  overflow:hidden
}
.circle:before{
  position:absolute;
  content:'';
  bottom:0;
  height:20%;
  left:0;
  right:0;
  background:#19af5c;
}
＆＃13; 
<div class="circle">
  
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

Kevin Weber创建了这个awesome solution（其实不仅仅是要求）

function animate( $that, percentage ) {
  if ( !$that.hasClass('fill') ) return;
  $that.removeClass('fill');

  percentage = (100 - percentage) || 0;
  var percentage_initial = 100,
      percentage_current = percentage_initial,
      interval = 0.5;

  var interval_gradient = setInterval(function(){
    $that.css(
      'background',
      'linear-gradient(#a0c884 '+percentage_current+'%,#426e1f '+percentage_current+'%)'
    );
    percentage_current -= interval;
    if(percentage_current <= percentage) clearInterval(interval_gradient);
  }, 5);

  $that.addClass('filled');
};

$('.fill').on('click', function() {
  var $that = $(this);
  var percentage = $that.attr('data-fill');
  setTimeout(function(){
    animate( $that, percentage )
  }, 400);
});
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background: #222;
}
.circle {
  width: 170px;
  height: 170px;
  margin-left: 0;
  border: 7px solid #f1f1f1;
  border-radius: 100%;
  text-align: center;
  color: #fff;
  background-color: #a0c884;
  text-shadow: 0px 0px 30px rgba(119, 119, 119, 0.7);
  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;
}
.circle-text {
  font-size: 56px;
  letter-spacing: 4px;
  font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 700;
  margin: 0;
  width: 100%;
}

/* For illustration, no effect on click */
.example {
   background: linear-gradient(#a0c884 34%, #426e1f 34%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color:#fff;">Click:</p>

<!-- Fillable bubble -->
<div class="circle fill" data-fill="64">
    <p class="circle-text">64%</p>
</div>
<!-- / Fillable bubble -->

<p style="color:#fff;">Result:</p>
<div class="circle filled example" data-fill="64">
    <p class="circle-text">64%</p>
</div>

答案 5 :(得分：0)

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    border-radius:50%;
    height: 100px;
width:100px;
   background: rgba(235,224,223,1);
background: -moz-linear-gradient(top, rgba(235,224,223,1) 0%, rgba(235,224,223,1) 90%, rgba(9,179,165,1) 90%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(235,224,223,1)), color-stop(90%, rgba(235,224,223,1)), color-stop(90%, rgba(9,179,165,1)));
background: -webkit-linear-gradient(top, rgba(235,224,223,1) 0%, rgba(235,224,223,1) 90%, rgba(9,179,165,1) 90%);
background: -o-linear-gradient(top, rgba(235,224,223,1) 0%, rgba(235,224,223,1) 90%, rgba(9,179,165,1) 90%);
background: -ms-linear-gradient(top, rgba(235,224,223,1) 0%, rgba(235,224,223,1) 90%, rgba(9,179,165,1) 90%);
background: linear-gradient(to bottom, rgba(235,224,223,1) 0%, rgba(235,224,223,1) 90%, rgba(9,179,165,1) 90%);

}
</style>
</head>
<body>

<div id="grad1"></div>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

尝试使用SVG。这将更简单，更容易：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
      <stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
      <stop offset="20%" stop-opacity="1" stop-color="royalblue"/>
      <stop offset="20%" stop-opacity="0" stop-color="royalblue"/>
      <stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
  </linearGradient>
  <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
</svg>

只需更改第2行和第4行的偏移量，即20％，以调整所需的百分比。

相关问题
最新问题