CSS3圓環圖

Question

我創建了一個簡單的圓環圖的小提琴：http://jsfiddle.net/4azpfk3r/217/

我怎樣才能圓環圖有一個紅色的輪廓和填充是純紅色留下透明/紅比分/百分比概述百分比部分沒有得分？

CSS：

.background { 
    background: grey; 
} 

.item { 
    position: relative; 
    float: left; 
} 


.item h2 { 
    text-align:center; 
    position: absolute; 
    line-height: 125px; 
    width: 100%; 
} 


svg { 
    transform: rotate(-90deg); 
} 


.circle_animation { 
    stroke-dasharray: 440; 
    stroke-dashoffset: 440; 
} 


.html .circle_animation { 
    -webkit-animation: html 1s ease-out forwards; 
    animation: html 1s ease-out forwards; 
} 


.css .circle_animation { 
    -webkit-animation: css 1s ease-out forwards; 
    animation: css 1s ease-out forwards; 
} 


@-webkit-keyframes html { 
    to { 
     stroke-dashoffset: 80; 
    } 
} 


@keyframes html { 
    to { 
     stroke-dashoffset: 80; 
    } 
} 

Answer 1

如果我正確地理解你的問題，嘗試加入這一行的CSS：

#circle{fill:none;stroke:red;color:red}

對於得分類型也以紅色，添加顏色property to the h2：

.item h2 { 
    text-align:center; 
    position: absolute; 
    line-height: 125px; 
    width: 100%; 
    color:red; /*ADD RED COLOR TO SCORE*/ 
} 

要設置Score標題的樣式，首先給它一個類： <p class="scoreHeader">Score: 76/100</p>

和風格也如你所願：

.scoreHeader{ 
    padding:10px; 
    background:red; 
    color:white; 
    font-weight:bold; 
} 

Answer 2

檢查我的例子這裏https://codepen.io/350d/pen/gxXyGB 的想法是利用只是一個border-color和rotation。這裏沒有使用漸變和動畫。