使用CSS构建复杂的形状

Question

我正在开发一个针对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, 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中不起作用。

我知道你不喜欢不使用图像，但我认为如果只使用图像，这在代码中会更清晰。

为什么呢？因为你可以创建一个包含3个部分的精灵： 第一部分是仪表的外部部分，条形部分是透明的，第二部分是“条形”，第三部分是白色以隐藏条形并给出百分比的印象。

然后你做了一个简单的javascript代码，用于隐藏从右边开始的栏的百分比（比如用户有24％然后位置-76px）。

我会完全按照显示的方式绘制条形图并使用z-index将仪表放在顶部，然后使用白色部分来伪造进度。 一开始就是一个大圈子。

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

画了草图：

这个版本比纯CSS更容易，并且在所有浏览器上看起来都很相似。 调整大小也适用于流体div和流体图像大小的一些脚本。

一旦你想要使用其他比例，其余的就是简单的。

Answer 2

你必须准备好放弃一些视觉糖果以实现完全跨浏览器的兼容性，但是，鉴于你正在寻找iPhone / Android市场，我会愚弄自己并说“你会”没关系“

看看shapes of css - 可能是我发现的唯一有趣且有用的css-tricks文章 - 用于创造性的灵感，即使用css属性来完成你所追求的目标。做好准备，通过花哨的渐变，你会遇到在不同形状之间匹配“针脚”的问题。

语义标记可能是不可能的，所以你需要所有元素（但是请尝试利用：在假元素之前和之后：以便不完全污染HTML）。如果它取决于我，我可能会作弊并使温度计尖端固定，即始终完全填充或空，并将“进展”放入具有圆形TL和BL角的div中。

回想起来，你的例子已经更好了，但无论如何这里都是小提琴:) http://jsfiddle.net/8dbjw/