CSS Shape Outside - Firefox Browser Support

Question

I've been trying to get a CSS shape working cross browser, I've got it working in Chrome and Safari without any issues, I cannot seem to get it working in Firefox (not tested IE yet, not looking forward to that).

codepen

Here is the 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>

Here is the 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;
      }
    }
  }
}

I've tried an Adobe shape polyfill which didnt make any difference, is there any other options for this or should I be considering changing the design altogether?

Thanks

Answer 1

You could use svg's 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;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L0,550z" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <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>

---

You could add curves instead of a straight line using this approach.

Here are some examples.

.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;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L0,550 Q0,275 200,0" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <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>

---

.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;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L-210,550 Q200,275 150,0" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <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>

---

.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;
}

<div class="container">
  <section class="hero">
    <section class="slide">
      <svg width="700" height="550">
        <defs>
          <clipPath id="shape">
            <path d="M100,0 L700,0 L700,550 L75,550 Q-70,412.5 50,200 Q100,100 100,0" />
          </clipPath>
        </defs>
        <foreignObject clip-path="url(#shape)" width="100%" height="100%">
          <div class="shaped"></div>
        </foreignObject>
      </svg>
      <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>

Answer 2

I would suggest changing the approach all together, shape-outside isn't supported by FF or IE yet and you can achieve this layout with simple transforms on a pseudo element :

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);
}

<section>
  <h2>PROFESSIONAL PROPERTY MAINTENANCE SERVICES FOR BUSINESSES</h2>
  <p>Throughout the Northwest of England including Liveprool, Manchester, Preston, Wigan and St. Helens</p>
</section>

The transform property is supported by IE9+. More info on canIuse