title: Building complex shapes with CSS
body: <p>I'm working on a project for iphone and android browsers that requires that I build a thermometer-like progress meter that can react with browser resizing and easily be able to change the progress. It needs to be like the design as much as possible. That is, it needs the fancy gradients, inset highlighting, the border.</p>
  
  <p>The Meter: </p>
  
  <p><a href="https://i.stack.imgur.com/4rFTf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4rFTf.png" alt="enter image description here"></a></p>
  
  <p>Notice the white inset shadow and border</p>
  
  <p>The progress should extend into the circular portion as well and continue to have the fancy effects.</p>
  
  <p>I went ahead and got a rough prototype working (tested in chrome) <a href="http://jsfiddle.net/xduQ9/3/" rel="nofollow noreferrer">http://jsfiddle.net/xduQ9/3/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="meter complete"&gt;
    &lt;!-- Remove .complete to stop animation --&gt;
    &lt;div class="left-border"&gt;
      &lt;div class="inner"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="wrap"&gt;
      &lt;div class="progress"&gt;&lt;/div&gt;
      &lt;div class="top-mask"&gt;&lt;/div&gt;
      &lt;div class="bottom-mask"&gt;&lt;/div&gt;
      &lt;div class="circle-wrap"&gt;
        &lt;div class="circle"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The technique basically clips a rectangle with a striped green background with a few divs with rounded corners until the desired shape comes out. Then I use a bunch of shadows to add padding and the inset around the meter.</p>
  
  <p>My question: What would you do? I mean, I can optimize this solution a little. I could add more markup to get the design just right, but it feels so dirty. And I have a feeling it won't be easy to cross-browser test. I thought about using canvas, but having to redraw the shapes if the browser resizes is sucky.</p>
  
  <p>I'd like to avoid using images as much as possible, but if an elegant solution is possible with them, I'll definitely use it.</p>
  
  <p>While having the ability to change the color of the progress bar isn't a requirement of the implementation, I'd like a solution that has that ability.</p>