1

我目前正在使用剪辑路径中带有图像滑块的单页网站。此处示例：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>

然而，这似乎不起作用。我究竟做错了什么？

4

1 回答 1

2

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

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

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

于 2015-12-17T10:01:01.070 回答