使用CSS构建复杂的形状

Question

我对iPhone和Android浏览器中的一个项目工作,需要我建一个温度计般的进度表,可以用浏览器大小调整反应,并能够轻松地更改进度.它需要尽可能地像设计.也就是说,它需要花式渐变,嵌入突出显示,边框.

仪表:

注意白色插入阴影和边框

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

我继续前进,得到一个粗略的原型工作(用chrome测试)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, 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%;
  background: 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, 0, 1) 99%);
}

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

@-webkit-keyframes progress-slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-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;
  background: white;
  border-bottom: solid #b2b5bc 1px;
  border-radius: 0 0 33px 0;
  box-shadow: 1px 2px 0 #fff, 0 3px 0 rgba(255, 255, 255, 0.35);
}

.bottom-mask {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  height: 17px;
  padding-left: 45px;
  margin-left: -45px;
  background: 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,但是如果浏览器调整大小则必须重绘形状是很糟糕的.

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

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

Answer 1

你的小提琴在 Firefox (Aurora) 或 IE 中不起作用。

我知道你不喜欢使用图像，但我认为如果你只使用图像，代码会更干净。

为什么？因为您可以创建一个由三部分组成的精灵：第一部分具有仪表的外部部分，条形部分透明，第二部分具有“条形”，第三部分只是白色以隐藏条形并给人以百分比的印象。

然后，您执行一个简单的 javascript 代码来隐藏从右侧开始的栏的百分比（例如，如果用户有 24%，则位置为 -76px）。

我会按照它显示的完整状态绘制条形图，并使用 z-index 将仪表放在顶部，然后使用白色部分来假装进度。一开始就是一个大圈。

圆圈最终将填充圆形部分（我不知道当前的仪表在那里是什么样子，如果你在那里有直线，那么用正方形而不是圆形）。

用油漆画了一张草图：

这个版本比纯 CSS 更容易，并且在所有浏览器上看起来都一样。调整大小也可以通过流体 div 和流体图像大小中的一些脚本来实现。

一旦你确定了一个比例，剩下的事情就很简单了。