Html 外部CSS形状-Firefox浏览器支持

我一直在尝试让CSS形状在跨浏览器中工作，我在Chrome和Safari中工作没有任何问题，我似乎无法在Firefox中工作（尚未测试IE，不期待）

以下是HTML：

<div class="container">
  <section class="hero">
    <section class="slide">
      <div class="shaped"></div>
      <div class="hero-text">
        <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
        <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
      </div>
    </section>
  </section>
</div>

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

---

谢谢

我建议一起改变方法，外部形状还没有改变，您可以通过简单的伪元素实现此布局：

部分{
背景：url(http://lorempixel.com/output/people-q-c-640-480-9.jpg);
背景尺寸：封面；
填充：5%；
位置：相对位置；
溢出：隐藏；
最小宽度：700px；
}
第h2节，
第p节{
宽度：40%；
填充物：2%5%；
位置：相对位置；
z指数：1；
}
第h2节{
宽度：50%
}
章节：之前{
内容：''；
位置：绝对位置；
左：0；
排名：0；
宽度：60%；
身高：300%；
背景：灰色；
z指数：0；
-webkit转换来源：100%0；
-ms变换原点：100%0；
变换原点：100%0；
-webkit变换：旋转（20度）；
-ms变换：旋转（20度）；
变换：旋转（20度）；
}

为企业提供专业物业维修服务
英格兰西北部，包括利维普洛尔、曼彻斯特、普雷斯顿、维根和圣海伦斯

您可以使用

svg

的

clipPath

来进行

.container{
宽度：960px；
保证金：0自动；
}
第一节英雄{
填充：8px；
-moz框大小：边框框；
框大小：边框框；
溢出：隐藏；
宽度：100%；
高度：400px；
浮动：左；
}
section.hero section.slide{
位置：相对位置；
}
.成形{
背景：url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
高度：384px；
宽度：100%；
}
section.hero section.slide.hero文本{
-moz框大小：边框框；
框大小：边框框；
背景色：#333；
颜色：白色；
填充：30px；
高度：384px；
宽度：50%；
}
section.hero section.slide.hero文本h2{
边缘底部：20px；
}
svg{
浮动：对；
}

为企业提供专业物业维修服务
英格兰西北部，包括利维普洛尔、曼彻斯特、普雷斯顿、维根和圣海伦斯

这看起来是一个更可靠的解决方案，谢谢。我没想到，谢谢，我也来试试。这两个答案看起来都不错，但哪一个更好/更兼容？@Scriptable-我想说

svg

是一个不错的选择。查看浏览器对我的方法的支持。--->。它支持除IE8之外的所有浏览器。@Scriptable-您甚至可以像这样放置曲线-->很好！，我同意。。。SVG似乎是更好的选择，感谢ChipI和您发布的其他人一样，将使用它。再次感谢

.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, 100% 0, 100% 100%, 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;
      }
    }
  }
}