Имам клас Clipping в CSS, който работи само в Chrome и не работи в Firefox и Internet Explorer, как мога да го оправя? - css

тук css Използвах търсенето на проблема си, но не можех да намеря подобен въпрос.

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

Отговори:

Минимален жизнеспособен пример: https://jsfiddle.net/sheriffderek/d30dpveh/

Списък с браузъри и версии, които можете да очаквате да се прилагат: http://caniuse.com/#feat=css-clip-path (без поддръжка от Microsoft)

Още документи https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

маркиране

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

стилове

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

Когато е възможно - можете да опитате нещо като "autoprefixer" за автоматично добавяне на префикси за вас - и да се гарантира, че moz и webkit и др.