title: Make an arrow shape with responsive width and only CSS
body: <p>I'm trying to make a container that has an upward arrow attached to it. I am familiar with the <a href="https://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work">border drawing trick</a> and think that's a likely solution, but it only works for known sizes I think, since you have to specify border in em or px.</p>
  
  <p>The shape I would like to make is this:</p>
  
  <pre><code>          .
           / \
          /   \
         /     \
        | flex  |
        |       |
  </code></pre>
  
  <p>Where the content area can flex to different sizes as a percentage of a parent container.</p>
  
  <p>Here is the CSS, with the problem area flagged:</p>
  
  <pre><code>.metric {
      display: inline-block;
      position: relative;
      height: 150px;
      width: 50%;
      background: lawngreen;
  }
  
  .metric:after {
      position: absolute;
      top: -25px;
      left: 0;
      content: '';
      background: white;
      width: 100%;
      height: 0;
      border: 75px solid white; /* this fixed width is the problem */
      border-top: none;
      border-bottom: 25px solid lawngreen;
      box-sizing: border-box;
  }
  </code></pre>
  
  <p>Here is the jsfiddle: <a href="http://jsfiddle.net/C8XJW/2/" rel="nofollow noreferrer">http://jsfiddle.net/C8XJW/2/</a></p>
  
  <p>Do you guys know any way to pull this off?</p>