I have been asked to create a responsive application, the layout / theme of the application has a angled shapes (see image below). I've tried using CSS3 skew and rotate however these property values manipulated the content as well as the shape which is not what i want. I would just like the shape to have what appears to be a 90 degree angle and the text to lay on top of the shape.
Can this be accomplished using CSS3?
Rather than using skew and rotate on the container itself, you can use an ::after rule to create an empty div to rotate.
jsfiddle here: http://jsfiddle.net/carasin/ndb1koca/1/
html:
<div id="banner-wrap">
<div id="banner"><h1>Text here</h1></div>
</div>
css:
#banner-wrap {
position:relative;
}
#banner::after {
content: "";
display:block;
background: orange;
width:200%;
height:500px;
position:absolute;
left:-30%;
top:-60%;
z-index:0;
transform: rotate(13deg);
}
h1 {
font-family:sans-serif;
color:#fff;
text-transform:uppercase;
font-size:3em;
z-index:1;
position:relative;
padding:40px 30px ;
}
I've tried using CSS3 skew and rotate however these property values manipulated the content as well as the shape which is not what i want.
In order to prevent the content from being affected you could simply skew() the content In the opposite direction as well - Example.
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
}
h1, h2 {
text-transform: uppercase;
font-size: 6vw;
}
h2 {
font-size: 4vw;
}
.wrapper {
overflow: hidden;
}
header {
background-color: gold;
height: 40vw;
line-height: 40vw;
-webkit-transform: skewY(10deg);
-ms-transform: skewY(10deg);
-o-transform: skewY(10deg);
transform: skewY(10deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
}
header h1 {
-webkit-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
padding-left: 1em;
color: white;
}
.search {
background-color: lightgray;
padding: 1em;
margin: 0 1em;
}<div class="wrapper">
<header>
<h1>Hello World</h1>
</header>
</div>
<div class="search">
<h2>Search</h2>
</div>There's an upcoming CSS property that allows you to create this effect without hacks. It's called clip-path, though presently (Oct 2014) you need to use -webkit-clip-path to avoid collisions with an existing SVG CSS property. The two properties will be merged soon into a single clip-path.
This works today in Chrome, Safari, iOS 8 and Opera (Firefox will follow soon, without -webkit- prefix, obviously):
#banner {
background: yellow;
width: 600px;
height: 300px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 50%);
}
Since the polygon uses percentages, the clipping shape will scale with the container whatever dimensions it has -- good for responsive design.
Your use case means that this solution can degrade gracefully to a simple rectangle.
Learn mode about clipping as part of CSS Masking.
the text to lay on top of the shape? How exactly should it look like?