javascript - 画像スライダーのクリップパス (マスク) CSS スタイル (クロスブラウザー)

Question

jQuery 画像スライダーをマスクしようとしています。スライダーには次の構造が含まれます。

<div class="flexslider">
<ul class="slides">
    <li style="background-image: url('slides/1.jpg');"></li>
    <li style="background-image: url('slides/2.jpg');"></li>
    <li style="background-image: url('slides/3.jpg');"></li>
    <li style="background-image: url('slides/4.JPG');"></li>
    <li style="background-image: url('slides/5.jpg');"></li>
    <li style="background-image: url('slides/6.jpg');"></li>
    <li style="background-image: url('slides/7.jpg');"></li>
</ul>
</div>

この構造では、clip-path プロパティを flexslider div に適用したいと思います。Chrome では、プロパティに -webkit- プレフィックスを追加することで問題なく動作しますが、Firefox と IE は通常の clip-path プロパティをサポートしていないようです。

クロス ブラウザ ソリューションをオンラインで探していますが、見つかりません。Firefox は clip-path プロパティとして url 値のみをサポートしているのを見ましたが、IE はそれをまったくサポートしていません。

これがアイデアです：

赤い部分が画像スライダー。

誰かがこれに対するクロスブラウザソリューションを知っていますか?

ありがとう！