How to rotate background in CSS?

Question

I want to achieve a skewed/rotated background div with solid color.

Just like this:

I know there is a trick with rotating your background to create chamfered corners but will it work out here? Or jQuery will do better?

Second problem I might have with this is a content layer (marked as red) overlaying the two background div s.

Can you help me please?

Thanks in advance, and sorry for any language mistakes.

Answer 1

You can do this with pseudo elements.

http://jsfiddle.net/JDcF3/

I changed the colours to make visible

<div class="foo"></div>

.foo {
    position: relative;
    width: 200px;
    height: 100px;
    background: blue;
}

.foo:after {
    content: '';
    display:block;
    height:100px;
    width: 100px;
   -webkit-transform: skew(30deg, 0deg);
    background: red;
    left: 150px;
    position:absolute;
    z-index: -1;
}