Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Shape Outside - Firefox Browser Support

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

like image 279
Scriptable Avatar asked Dec 30 '14 13:12

Scriptable


People also ask

Can I use CSS shape-outside?

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

Can CSS use shapes?

CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need.

How do I create a polygon shape in CSS?

The polygon() function is an inbuilt function in CSS which is used with the filter property to create a polygon of images or text. Syntax: polygon( percentage | length); Parameter: This function accepts two parameter percentage or length which is used to hold the value of polygon size.


2 Answers

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.

enter image description here

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

enter image description here

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

enter image description here

.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>
like image 58
Weafs.py Avatar answered Oct 09 '22 10:10

Weafs.py


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

like image 44
web-tiki Avatar answered Oct 09 '22 11:10

web-tiki