Ich habe eine Clipping-Klasse in CSS, die nur in der Chrom funktioniert und nicht in Firefox und Internet Explorer funktioniert, wie kann ich es beheben? - css

hier die css Ich habe die Suche nach meinem Problem verwendet, aber ich konnte keine ähnliche Frage finden. Ich habe Prblem mit CSS in Firefox.

    .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%);
}

Antworten:

Minimum praktikables Beispiel: https://jsfiddle.net/sheriffderek/d30dpveh/

Liste der Browser und Versionen, von denen Sie erwarten können, dass dies angewendet wird: http://caniuse.com/#feat=css-clip-path (keine Microsoft-Unterstützung)

Weitere Dokumente https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Markup

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

Stile

.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%);
}

Wann immer möglich - Sie können etwas wie "Autoprefixer" versuchen, um automatisch die Präfixe für Sie hinzuzufügen - und sicherzustellen, dass Moz und Webkit usw. alle hinzugefügt werden, wenn sie da sein müssen.