Curseur dans un chemin de clip dans Firefox, Opera,

Question

Je travaille actuellement sur un site d'une page avec un curseur d'image dans un tracé de clip. Exemple ici: http://grafomantestsite3.be/.

Voici un petit morceau de 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>

Le curseur est généré à l'aide d'un bloc dans Concrete5. Ainsi, le code HTML du curseur d'image est généré à l'aide d'un script.

Cela semble fonctionner dans Chrome, mais pas dans Firefox, Opera, Internet Explorer ...

est-il un moyen facile de résoudre ce problème? Je connais la méthode SVG mais cela ne semble pas fonctionner puisque vous avez besoin de définir les images d'arrière-plan dans le code HTML? Et ici ce n'est pas possible.

Toute aide serait grandement appréciée.

Merci d'avance.

Edit:

donc j'ai essayé la méthode SVG et a ajouté à corps du 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>

Cela ne semble pas fonctionner. Qu'est-ce que je fais mal?

Answer 1

Premièrement, -webkit-clip-path ne s'applique qu'aux navigateurs basés sur Webkit (Chrome/Safari/Opera). Si vous souhaitez utiliser des chemins de découpe sur Firefox, vous devez également utiliser clip-path.

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

L'autre problème est que Firefox ne supporte pas encore les formes CSS comme polygon() pour les chemins de clip. Vous devrez définir un polygone dans un fichier SVG et le référencer avec clip-path: url(#id-of-your-polygon-element).