title: Creating svg clip-path polygon for Firefox that mimics css clip-path polygon used on Chrome
body: <p>I have a hero image (full width / 70% height div with background image) that I am applying a mask to make the lower edge into a bit of a down arrow.  I set it up using css clip-path with percentages so it scales nicely across different viewport sizes.</p>
  
  <pre><code>-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 96%, 50% 100%, 0% 96%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 96%, 50% 100%, 0% 96%);
  </code></pre>
  
  <p>It performs as expected in compatible browsers like Chrome, but of course fails in Firefox.  I am trying to create a svg to use with the url() function which Firefox is supposed to honor.  But have struck out.</p>
  
  <p>I understand that svg's can not use percentages, so have tried using 0.0=0%, 1.0=100% and 0.XX for everything in between but that doesn't seem to work or perhaps the svg is not scaling to cover the hero image div.</p>
  
  <pre><code>&lt;svg width="0" height="0"&gt;
    &lt;defs&gt;
      &lt;clipPath id="clip-shape" clipPathUnits="objectBoundingBox"&gt;
        &lt;polygon points="0 0, 1.0 0, 1.0 0.96, 0.5 1.0, 0 0.96" /&gt;
      &lt;/clipPath&gt;
    &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Is there a way to convert these percentage based css polygons to an svg that will work in Firefox?  And any tricks to getting it to scale across different viewports? (preferably without having to add JS, definitely without jQuery)</p>
  
  <p>While Firefox's shortcomings don't effect the page in a bad way, it would be nice to present the same scroll down encouragement on all browsers.</p>