Full width SVG clip

I'm currently working on a clipping path for a onepage site: http://grafomantestsite3.be/

As you can see, this works for chrome, but not for firefox, opera, etc.

I made a codepen to illustrate my problem: http://codepen.io/anon/pen/EPKvXV

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);
}

<div id="slide1">
  <div class="ccm-image-slider-container">
    <div class="ccm-custom-style-slide1">
      <!-- here you have the slider -->
    </div>
  </div>
</div>


<svg width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="0 500,960 450,960 0,0 0">
    </polygon>
  </clipPath>
</svg>

So my problem: i can't seem to get the SVG clip to work full screen (width = 100%). Any solutions?

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).

Any solutions will be greatly appreciated.

Thanks in Advance.

Solution

You need to define the clip path so it is relative to the bounding box of the object it will be attached to. You do that by specifying clipPathUnits="objectBoundingBox". Then you define your clip path in object bounding box coordinates: (0,0) is top left, (1,1) is bottom right.

#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);
}

<div id="slide1">
  <div class="ccm-image-slider-container">
    <div class="ccm-custom-style-slide1">
      <!-- here you have the slider -->
    </div>
  </div>
</div>


<svg width="0" height="0" >
  <clipPath id="clipPolygon" clipPathUnits="objectBoundingBox">
    <polygon points="0 1,1 0.9,1 0,0 0">
    </polygon>
  </clipPath>
</svg>