Creating a angled shape with CSS3

Question

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?

Answer 1

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