html - 如何在不同的浏览器中使用形状(多边形)？

Question

我正在我的网站上使用 CSS 来制作形状。 它在 chrome 中运行良好，但在 mozilla、internet explorer 中打开时，它无法运行。

有人知道怎么解决吗？

这是 fiddle

http://fiddle.jshell.net/dm3qe27o/2/

<div class="index-main-wrapper">
    <div class="home-left-shape"></div>
    <div class="home-right-shape"></div>
    <div style="clear:both;"></div>
</div>

.home-left-shape {
height:100vh;
width:50vw;
float:left;
background-color:#bfb6a5;
background-size:cover;
-webkit-shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
-webkit-shape-margin: 20px;
}
.home-right-shape {
height:100vh;
width:50vw;
float:right;
background-color:#bfb6a5;
background-size:cover;
-webkit-shape-outside: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
shape-outside: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
-webkit-shape-margin: 20px;
}

Answer 1

使用不同的浏览器

-webkit-shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%); -mozila & chrom

-moz-shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%); - mozila

-o-shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%); - 歌剧

-ms-shape-outside: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%); - Internet Exploler