html - Firefox、Opera、

Question

私は現在、クリップ パスに画像スライダーがある 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>

ただし、これは機能していないようです。私は何を間違っていますか？