如何在另一個邊界上製作部分有邊界的圓？

Question

我有一個百分比覆蓋邊界在另一個較低的不透明度頂部的圓圈。如何通過CSS做到這一點？我試過width: 20%，但是對於邊界半徑它不起作用。我想使這個作爲示例圖像：

而且如何使部分覆蓋邊框的結局與半圓形狀？

Answer 1

this is a purely css based progress bar in circle shape 
in your html: 

    <div class="c100 p25"> 
    <span>25%</span> 
    <div class="slice"> 
     <div class="bar"></div> 
     <div class="fill"></div> 
     </div> 
     </div> 
in css: 

    .c100.p25 .fill { 
     position: absolute; 
     border: 0.08em solid #307bbb; 
     width: 0.84em; 
     height: 0.84em; 
     clip: rect(0em, 0.5em, 1em, 0em); 
     border-radius: 50%; 
     -webkit-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     transform: rotate(0deg); 
     } 
     .c100 { 
     position: relative; 
     font-size: 120px; 
     width: 1em; 
     height: 1em; 
     border-radius: 50%; 
     float: left; 
     margin: 0 0.1em 0.1em 0; 
     background-color: #cccccc; 
     } 
     .c100 *, 
     .c100 *:before, 
     .c100 *:after { 
     -webkit-box-sizing: content-box; 
     -moz-box-sizing: content-box; 
      box-sizing: content-box; 
     } 
      .c100.center { 
      float: none; 
      margin: 0 auto; 
       } 

       .c100 > span { 
       position: absolute; 
        width: 100%; 
       z-index: 1; 
       left: 0; 
       top: 0; 
       width: 5em; 
       line-height: 5em; 
       font-size: 0.2em; 
       color: #cccccc; 
       display: block; 


    text-align: center; 
     white-space: nowrap; 
     -webkit-transition-property: all; 
     -moz-transition-property: all; 
     -o-transition-property: all; 
     transition-property: all; 
     -webkit-transition-duration: 0.2s; 
     -moz-transition-duration: 0.2s; 
     -o-transition-duration: 0.2s; 
     transition-duration: 0.2s; 
     -webkit-transition-timing-function: ease-out; 
     -moz-transition-timing-function: ease-out; 
     -o-transition-timing-function: ease-out; 
     transition-timing-function: ease-out; 
    } 
    .c100:after { 
     position: absolute; 
     top: 0.08em; 
     left: 0.08em; 
     display: block; 
     content: " "; 
     border-radius: 50%; 
     background-color: #f5f5f5; 
     width: 0.84em; 
     height: 0.84em; 
     -webkit-transition-property: all; 
     -moz-transition-property: all; 
     -o-transition-property: all; 
     transition-property: all; 
     -webkit-transition-duration: 0.2s; 
     -moz-transition-duration: 0.2s; 
     -o-transition-duration: 0.2s; 
     transition-duration: 0.2s; 
     -webkit-transition-timing-function: ease-in; 
     -moz-transition-timing-function: ease-in; 
     -o-transition-timing-function: ease-in; 
     transition-timing-function: ease-in; 
    } 
    .c100 .slice { 
     position: absolute; 
     width: 1em; 
     height: 1em; 
     clip: rect(0em, 1em, 1em, 0.5em); 
    } 
.c100.p25 .bar { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 

.c100:hover { 
    cursor: default; 
} 
.c100:hover > span { 
    width: 3.33em; 
    line-height: 3.33em; 
    font-size: 0.3em; 
    color: #307bbb; 
} 
.c100:hover:after { 
    top: 0.04em; 
    left: 0.04em; 
    width: 0.92em; 
    height: 0.92em; 
}