title: How to accomplish this shape with angled cuts at the bottom and an image background in CSS?
body: <p>I have <a href="http://css-tricks.com/working-with-shapes-in-web-design/" rel="nofollow noreferrer">read up on various methods</a> and played with the <a href="http://bennettfeely.com/clippy/" rel="nofollow noreferrer">Clippy tool</a>, the problem is the browser support just isn't there yet.  What would be the best method for accomplishing the look of the image below with CSS?  I am trying to add a shape as <code>bottom-border</code> as you can see in the image below right after the blue background image. Is there a way I can do this that most recent major browsers support through CSS?</p>
  
  <p>What I've tried (doesn't seem to work in Chrome and others):</p>
  
  <pre><code>.element {
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 86%, 75% 100%, 0 85%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 86%, 75% 100%, 0 85%, 0 0);
  }
  </code></pre>
  
  <p>The desired result would look something like:
  <a href="https://i.stack.imgur.com/1R3we.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1R3we.png" alt="enter image description here"></a></p>