html – CSS形状外 – Firefox浏览器支持

我一直在尝试使用跨浏览器的CSS形状,我已经在Chrome和Safari中使用它没有任何问题,我似乎无法在Firefox中工作(尚未测试IE,不期待那样).

codepen

这是HTML：

nesSESnorthwest of England including Liveprool,Manchester,Preston,Wigan and St. Helens

这是CSS：

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  Box-sizing: border-Box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float:left;
  section.slide {
    position:relative;
    .shaped {
      background-size: cover;
      shape-outside: polygon(20% 0,100% 0,100% 100%,0% 100%);
      clip-path: polygon(20% 0,0% 100%);
      background-image: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
      height: 384px;
      float:left;
      width: 70%;
      float: right;
      shape-margin: 20px;
    }
    .hero-text {
      Box-sizing: border-Box;
      background-color: #333;
      color: white;
      padding: 30px;
      height: 384px;
      width: 50%;
      h2 {
        margin-bottom: 20px;
      }
    }
  }
}

我尝试过一种Adobe形状的polyfill,它没有任何区别,是否有其他选择,或者我应该考虑完全改变设计？

谢谢

最佳答案

你可以使用svg的clipPath for cross-browser support.

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-Box-sizing: border-Box;
  Box-sizing: border-Box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-Box-sizing: border-Box;
  Box-sizing: border-Box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

nesSESnorthwest of England including Liveprool,Wigan and St. Helens

您可以使用此方法添加曲线而不是直线.

这里有些例子.

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-Box-sizing: border-Box;
  Box-sizing: border-Box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-Box-sizing: border-Box;
  Box-sizing: border-Box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

nesSESnorthwest of England including Liveprool,Wigan and St. Helens

.container {
  width: 960px;
  margin: 0 auto;
}
section.hero {
  padding: 8px;
  -moz-Box-sizing: border-Box;
  Box-sizing: border-Box;
  overflow: hidden;
  width: 100%;
  height: 400px;
  float: left;
}
section.hero section.slide {
  position: relative;
}
.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}
section.hero section.slide .hero-text {
  -moz-Box-sizing: border-Box;
  Box-sizing: border-Box;
  background-color: #333;
  color: white;
  padding: 30px;
  height: 384px;
  width: 50%;
}
section.hero section.slide .hero-text h2 {
  margin-bottom: 20px;
}
svg {
  float: right;
}

css-shapes