CSS形状外-Firefox浏览器支持

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

codepen

这是HTML:

  

    

      

      

        
PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES
        
Throughout the Northwest 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, 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;
      }
    }
  }
}

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

谢谢

我建议一起改变方法,FF或IE还不支持 shape-outside ,你可以通过伪元素上的简单转换实现这种布局:

DEMO

section {
  background: url(http://lorempixel.com/output/people-q-c-640-480-9.jpg);
  background-size: cover;
  padding: 5%;
  position: relative;
  overflow: hidden;
  min-width: 700px;
}
section h2,
section p {
  width: 40%;
  padding: 2% 5%;
  position: relative;
  z-index: 1;
}
section h2 {
  width: 50%
}
section:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  height: 300%;
  background: grey;
  z-index: 0;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

  
PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES
  
Throughout the Northwest of England including Liveprool, Manchester, Preston, 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;
}

  

    

      
      

        
PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES
        
Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens