Question

我在网站上使用css做形状。它在chrome中工作得很好，但是当在mozilla，Internet Explorer中打开时，它无法正常工作。

任何人都知道如何解决它？

这是小提琴

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＆amp; 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

如何在不同的浏览器中使用形状（多边形）？

1 个答案: