How To Rotate Background In Css?

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 w

Solution 1:

You can do this with pseudo elements.

http://jsfiddle.net/JDcF3/

I changed the colours to make visible

<divclass="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;
}