Search code examples
htmlcsssvgclipclip-path

Slider in a clip path in Firefox, Opera,

I'm currently working on a onepage site with an image slider in a clip path. Example here: http://grafomantestsite3.be/.

Here is a small piece of code:

#slide1 {
  height: 500px;
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: 0px !important;
  -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>

The slider is generated using a block in Concrete5. So the HTML code for the image slider is generated using a script.

This seems to work in Chrome, but not in Firefox, Opera, Internet Explorer...

Is there an easy way to fix this? I know about the SVG method but that doesn't seem to work since you need to set the background images within the HTML? And here this is not possible.

Any help would be greatly appreciated.

Thanks in advance.

Edit:

So i tried the SVG method and added this to the body of the HTML:

#slide1 {
  height: 500px;
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: 0px !important;
  clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);
  /*Firefox*/
  clip-path: url("#clipPolygon");
}
<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>

This however does not seem to work. What am i doing wrong?

Solution

  • Firstly, -webkit-clip-path only applies to webkit based browsers (Chrome/Safari/Opera). If you want to use clip paths on Firefox, you'll need to also use clip-path.

    See: http://caniuse.com/#feat=css-clip-path

    The other problem is that Firefox doesn't yet support CSS shapes like polygon() for clip paths. You'll need to define an polygon in an SVG and reference that with clip-path: url(#id-of-your-polygon-element).