Wie man einen teilweise eingefassten Kreis über einer anderen Grenze macht?

Question

Ich habe einen Kreis mit einem Prozentsatz von bedecktem Rand über einem anderen mit geringerer Deckkraft. Wie mache ich das mit CSS? Ich habe versucht, width: 20%, aber für Rand-Radius funktioniert es nicht. Ich will das machen, wie am Beispiel Bild:

Auch wie Ende der teilweise überdachten Grenze mit Halbkreisform machen?

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