jquery – 使用CSS构建复杂形状

我正在开发一个针对 iphone和 android浏览器的项目,要求我构建一个类似温度计的进度表,它可以对浏览器调整大小做出反应,并且可以轻松地改变进度.它需要尽可能地像设计.也就是说,它需要花式渐变,嵌入突出显示,边框.

仪表：

注意白色插入阴影和边框

进展应延伸到圆形部分,并继续产生奇特的效果.

我继续前进,得到一个粗略的原型工作(用铬测试)http://jsfiddle.net/xduQ9/3/

html,body {
  padding: 25px;
}

.circle {
  margin-left: -6px;
  width: 48px;
  height: 48px;
  border-radius: 25px 25px 25px 24px;
  border: solid rgba(178,181,188,0.8) 1px;
  Box-shadow: inset 1px 2px 0 #fff,inset 1px -2px 0 #fff,inset -2px 0 0 #fff,inset -2px -2px 0 #fff,inset 0 3px 0 rgba(255,255,0.35),-20px -20px 0 #fff,20px -20px 0 #fff,20px 20px 0 #fff,-20px 20px 0 #fff;
}

.circle-wrap {
  overflow: hidden;
  width: 48px;
  height: 51px;
  position: absolute;
  right: 0;
}

.wrap {
  display: -webkit-Box;
  width: 100%;
  position: relative;
  height: 51px;
  overflow: hidden;
}

.progress {
  position: absolute;
  z-index: 0;
  height: 100%;
  width: 70%;
  @R_197_11442@kground: url("http://dl.dropBox.com/u/905197/white-Stripe-diagonal.png"),-webkit-linear-gradient(top,rgba(183,237,21,1) 0%,rgba(140,186,24,1) 28%,rgba(78,126,11,1) 65%,rgba(59,86,1) 99%);
}

.meter.complete .progress {
  width: 100%;
  -webkit-animation: progress-slide 0.6s linear infinite;
}

@-webkit-keyframes progress-slide {
  0% {
    @R_197_11442@kground-position: 0 0;
  }
  100% {
    @R_197_11442@kground-position: 25px 25px;
  }
}

.progress-cover {
  position: absolute;
  top: 19px;
  width: 70%;
  height: 12px;
  border-radius: 9px 0 0 9px;
  border: solid #70901b 1px;
  border-right: 0;
  z-index: 2;
}

.top-mask {
  position: absolute;
  Box-sizing: border-Box;
  width: 100%;
  height: 18px;
  padding-left: 45px;
  margin-left: -45px;
  @R_197_11442@kground: white;
  border-bottom: solid #b2b5bc 1px;
  border-radius: 0 0 33px 0;
  Box-shadow: 1px 2px 0 #fff,0 3px 0 rgba(255,0.35);
}

.bottom-mask {
  position: absolute;
  bottom: 0;
  Box-sizing: border-Box;
  width: 100%;
  height: 17px;
  padding-left: 45px;
  margin-left: -45px;
  @R_197_11442@kground: white;
  border-top: solid #b2b5bc 1px;
  border-radius: 0 19px 0 0;
  Box-shadow: 1px -2px 0 #fff;
}

.inner {
  position: absolute;
  top: 0;
  left: 2px;
  width: 3px;
  height: 12px;
  border: solid 3px #fff;
  border-right: none;
  border-radius: 5px 0 0 5px;
}

.meter {
  position: relative;
}

.left-border {
  position: absolute;
  top: 17px;
  left: -4px;
  width: 10px;
  height: 16px;
  border-radius: 12px 0 0 12px;
  border: solid 1px #b2b5bc;
  border-right: none;
  z-index: 3;
}

<div class="meter complete">
  <!-- Remove .complete to stop animation -->
  <div class="left-border">
    <div class="inner"></div>
  </div>
  <div class="wrap">
    <div class="progress"></div>
    <div class="top-mask"></div>
    <div class="bottom-mask"></div>
    <div class="circle-wrap">
      <div class="circle"></div>
    </div>
  </div>
</div>

该技术基本上剪切了一个带有条纹绿色背景的矩形,带有几个圆角的div,直到出现所需的形状.然后我使用一堆阴影来添加填充和仪表周围的插入.

我的问题：你会做什么？我的意思是,我可以稍微优化这个解决方案.我可以添加更多标记以使设计恰到好处,但感觉非常脏.而且我觉得跨浏览器测试并不容易.我考虑过使用canvas,但是如果浏览器调整大小则必须重绘形状是很糟糕的.

我想尽可能避免使用图像,但如果可以使用它们,我肯定会使用它.

虽然能够改变进度条的颜色并不是实现的要求,但我想要一个具有这种能力的解决方案.