title: Full width SVG clip
body: <p>I'm currently working on a clipping path for a onepage site:
  <a href="http://grafomantestsite3.be/" rel="nofollow">http://grafomantestsite3.be/</a></p>
  
  <p>As you can see, this works for chrome, but not for firefox, opera, etc.</p>
  
  <p>I made a codepen to illustrate my problem:
  <a href="http://codepen.io/anon/pen/EPKvXV" rel="nofollow">http://codepen.io/anon/pen/EPKvXV</a></p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#slide1 {
    height: 500px;
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: 0px !important;
    /*Firefox*/
    clip-path: url("#clipPolygon");
    background-color: black;
    clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="slide1"&gt;
    &lt;div class="ccm-image-slider-container"&gt;
      &lt;div class="ccm-custom-style-slide1"&gt;
        &lt;!-- here you have the slider --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;svg width="0" height="0"&gt;
    &lt;clipPath id="clipPolygon"&gt;
      &lt;polygon points="0 500,960 450,960 0,0 0"&gt;
      &lt;/polygon&gt;
    &lt;/clipPath&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So my problem: i can't seem to get the SVG clip to work full screen (width = 100%). Any solutions?</p>
  
  <p>Extra note: i work in concrete5 (CMS) which means i can't control the image shown within the clip. As a bonus, i want to use this in an image slider (which already works in chrome). </p>
  
  <p>Any solutions will be greatly appreciated.</p>
  
  <p>Thanks in Advance.</p>