CSS如何实现gauge效果？

Question

试过了很多方法，还是没有达到图片中所示的效果。
我希望借助linear-gradient来实现，参考：http://codepen.io/thebabydino/pen/hkxGp，只是目前没有思路。

问题更新

• 预期效果：整个灰色圆弧表示100。红色圆弧表示实际数字，长度与数字成正比

• 希望DOM结构简洁，如果linear-gradient不适合，就使用其他方法

Answer 1

按你的 code 稍微改了下~~~
我只想说 这重叠渐变 好难掌握

<div class='colorWheel'>
  <div class="mask">45</div>
</div>

body { background: gainsboro; } 
.colorWheel {
  position: relative;
  margin: 1em auto;
  width: 16em; height: 16em;
  border-radius: 50%;
  background: 
    linear-gradient(36deg, #234 42.34%, transparent 42.34%) 0 0,
    linear-gradient(72deg, #9ac147 75.48%, transparent 75.48%) 0 0,
    linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
    linear-gradient(-72deg, #9ac147 75.48%, transparent 75.48%) 100% 0, 
    linear-gradient(36deg, transparent 57.66%, #9ac147 57.66%) 100% 100%,
    linear-gradient(72deg, transparent 24.52%, #9ac147 24.52%) 100% 100%,
    linear-gradient(-36deg, transparent 57.66%, #234 57.66%) 0 100%,
    linear-gradient(-72deg, transparent 24.52%, #9ac147 24.52%) 0 100%, 
    #9ac147 linear-gradient(#9ac147, #9ac147) 50% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  transition: 1s;
}
.colorWheel:hover {
  transform: rotate(360deg);
}
.mask{
    width:15rem;
    height:15rem;
    background:#fff;
    border-radius:50%;
    position:relative;
    top:0.5rem;
    left:0.5rem;
    font-size:5rem;
    text-align:center;
    line-height:15rem;
}

Answer 2

图形绘制已经解决了。发现使用canvas绘图比较方便。jquery实现如下：

(function($){
    $.fn.gauge=function(opts){

        // merge with default setting
        var cfg = $.extend({
            scoreColor: '#fc9fb6',
            totalColor: '#e1e9fa',
            score: 0,
            width: this.width(),
            lineWidth: 20,
            openAngle: 0,
            id: 'gauge-'+Math.random().toString(36).substr(2, 4)
        }, opts);
        
        // insert canvas after div container
        $('<canvas>'+ cfg.score +'</canvas>').attr({
            id: cfg.id,
            width: cfg.width,
            height: cfg.height || cfg.width,
        }).css({ margin: '0 auto', display: 'block' }).appendTo(this);
      
      // convert degrees to radians
      var radians_of = function(degrees) {
        return degrees * Math.PI / 180;
      };
      
      // prepare for canvas drawing
      var canvas = document.getElementById(cfg.id),
          context = canvas.getContext('2d'),
          x = canvas.width / 2,
          y = canvas.height / 2,
          radius = cfg.width / 2 - cfg.lineWidth,
          openAngle = cfg.openAngle,
          rangeAngle = cfg.score / 100 * ( 360 - 2 * cfg.openAngle ); 
      
      // score range
      var scoreArc = {
        startAngle: 90 + openAngle, 
        endAngle: (90 + openAngle + rangeAngle)%360 
      }
      
      // remained range
      var remainArc = {
        startAngle: scoreArc.endAngle, 
        endAngle: 90 - openAngle
      }
      
      // draw score
      context.lineWidth = cfg.lineWidth;
      context.beginPath();
      context.arc(x, y, radius, radians_of(scoreArc.startAngle), radians_of(scoreArc.endAngle), false);

      context.strokeStyle = cfg.scoreColor;
      context.stroke();
      
      // draw remaining
      context.beginPath();
      context.arc(x, y, radius, radians_of(remainArc.startAngle), radians_of(remainArc.endAngle),false);

      context.strokeStyle = cfg.totalColor;
      context.stroke();

      // todo draw text
      return this;
    }
}(jQuery));

用法

<div id="canvas-container"></div>
<script>
  $('#canvas-container').gauge({ score: 50, openAngle: 60, width: 300 });
</script>

代码比较粗糙，如有疏漏之处，恳请大家修正