У мене клас Clipping в css, який працює тільки в chrome і не працює в Firefox та Internet Explorer, як я можу це виправити? - css

тут css Я використовував пошук своєї проблеми, але не можу знайти подібного питання. У мене є проблема з CSS на 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%);
}

Відповіді:

Мінімальний приклад життєздатності: 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 і т.д. додані всі, коли вони повинні бути там.