1. 首頁
  2. 問答
  3. 如何使用css只對10％的圓底進行着色？

如何使用css只對10％的圓底進行着色？

2016-10-14 60 views

回答

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>

來源

2016-10-14 11:16:31 Justinas

+0

Thankyou Justinas。非常感謝。 –

0

我已經使用僞元件。如果填充顏色是靜態的，這將起作用。

.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; 
 
}
<div class="circle"> 
 
    
 
</div>

來源

2016-10-14 11:17:23

0

凱文·韋伯創造了這個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>

來源

2016-10-14 11:21:39

0 

<!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>

來源

2016-10-14 11:30:51

0

最簡單的解決方法是對第二個邊框使用方形陰影，對於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/

來源

2016-10-14 11:37:26

1 

.circle-border{ 
 
\t \t \t border-radius: 50%; 
 
\t \t \t border: 8px solid #E6E6E6; 
 
\t \t  padding: 20px; 
 
\t \t  width: 200px; 
 
\t \t  height: 200px; 
 
\t \t } 
 
\t \t .text{ 
 
\t \t \t position: relative; 
 
\t \t \t top: 15%; 
 
\t \t \t text-align: center; 
 
\t \t \t font-size: 16px; 
 
\t \t \t color: #666; 
 
\t \t \t font-family: Arial; 
 
\t \t } 
 
\t \t .semi-circle{ 
 
\t \t \t position: relative; 
 
\t \t \t top:25%; 
 
\t \t  \t background-color: #00C0A4; 
 
    \t \t width: 200px; 
 
\t \t  height: 70px; 
 
\t \t  border-radius: 50%/100%; 
 
\t \t  border-bottom-left-radius: 0; 
 
\t \t  border-bottom-right-radius: 0; 
 
\t \t  transform: rotate(180deg); 
 
\t \t }
<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>

我的地方d圈內的半圓。這是我的解決方案。

<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>

來源

2016-10-14 11:45:27

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％調整所需的百分比，其中偏移。

來源

2016-10-14 11:49:27

相關問題

 相關問題