Mam klasy Clipping w css, która działa tylko w chrome i nie działa w Firefox i Internet Explorer, jak mogę to naprawić? - css

tutaj css Szukałem mojego problemu, ale nie mogłem znaleźć żadnego podobnego pytania. Mam problem z CSS w Firefoksie. ”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%);
}

Odpowiedzi:

Minimalny możliwy przykład: https://jsfiddle.net/sheriffderek/d30dpveh/

Lista przeglądarek i wersji, których można się spodziewać po zastosowaniu: http://caniuse.com/#feat=css-clip-path (bez pomocy technicznej firmy Microsoft)

Więcej dokumentów https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

narzut

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

style

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

Gdy tylko jest to możliwe - możesz spróbować czegoś takiego jak „autoprefixer”, aby automatycznie dodawać prefiksy dla Ciebie - i upewnij się, że obszar moz i webkit itp. Został dodany, gdy muszą tam być.