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。这里没有使用渐变和动画。