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

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