Firefox、Opera 中剪辑路径中的滑块，

Question

我目前正在一个单页网站上工作，剪辑路径中有一个图像滑块。这里的例子： http://grafomantestsite3.be/。

这是一小段代码：

#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>

滑块是使用 Concrete5 中的块生成的。因此，图像滑块的 HTML 代码是使用脚本生成的。

这似乎适用于 Chrome，但不适用于 Firefox、Opera、Internet Explorer...

有没有简单的方法可以解决这个问题？我知道 SVG 方法，但这似乎不起作用，因为您需要在 HTML?而这里是不可能的。

如有任何帮助，我们将不胜感激。

提前致谢。

编辑：

所以我尝试了 SVG 方法并将其添加到 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>

但这似乎不起作用。我做错了什么？

Answer 1

首先，-webkit-clip-path 仅适用于基于 webkit 的浏览器 (Chrome/Safari/Opera)。如果你想在 Firefox 上使用剪辑路径，你还需要使用 clip-path.

参见：http://caniuse.com/#feat=css-clip-path

另一个问题是 Firefox 尚不支持 CSS 形状，例如 polygon() 的剪辑路径。您需要在 SVG 中定义多边形并使用 clip-path: url(#id-of-your-polygon-element).

引用它

Firefox、Opera 中剪辑路径中的滑块，

Slider in a clip path in Firefox, Opera,

html

css

svg

clip

clip-path