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
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.
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.
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.
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With