Ho una classe di clipping in css che funziona solo nel chrome e non ha funzionato in firefox e internet explorer, come posso risolverlo? - css

qui il css Ho usato la ricerca per il mio problema, ma non ho trovato alcuna domanda simile. Ho un po 'di background con CSS su Firefox. "Clip-path:" doesn "t show.

    .clip {
/* PLACE IN THE BEFORE AREA */
content:"";
width: 100%;
max-width: 100%;
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;

background-color: rgba(58, 60, 69, .6);
-webkit-clip-path: polygon(50% 100%, 100% 90%, 100% 0%, 0% 0%, 0 90%);
clip-path: polygon(50% 100%, 100% 90%, 100% 0%, 0% 0%, 0 90%);
}

risposte:

Esempio minimo vitale: https://jsfiddle.net/sheriffderek/d30dpveh/

Elenco di browser e versioni che è possibile aspettarsi da applicare: http://caniuse.com/#feat=css-clip-path (nessun supporto Microsoft)

Più documenti https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

markup

<div class="thing"></div>

stili

.thing {
width: 200px;
height: 200px;
background: red;
-webkit-clip-path: polygon(50% 100%, 100% 90%, 100% 0%, 0% 0%, 0 90%);
clip-path: polygon(50% 100%, 100% 90%, 100% 0%, 0% 0%, 0 90%);
}

Ogni volta che è possibile, puoi provare qualcosa come "autoprefixer" per aggiungere automaticamente i prefissi per te - e assicurarti che l'area moz e webkit ecc. Vengano aggiunti tutti quando devono essere lì.