title: Alternative to Clip-Path with universal browser support?
body: <p>I've used a few clip-path polygon shapes to create downward pointing content boxes on my site, you can see a few examples on the home page here: <a href="http://550.9f2.myftpupload.com/" rel="noreferrer">http://550.9f2.myftpupload.com/</a>  and this is the CSS I'm using:</p>
  
  <pre><code>.bottom_arrow {
  -webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
  clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
  }
  </code></pre>
  
  <p>But I understand this doesn't work in Firefox without some modifications (like using a .svg URL?) and that even this doesn't work in IE and Edge. Is there an alternative CSS trick I can use to make these shapes that has better cross-browser support? </p>