How to rotate background in CSS?

Tags: html,css,background,geometry

Problem :

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 divs.

Can you help me please?

Thanks in advance, and sorry for any language mistakes.

Solution :

You can do this with pseudo elements.

I changed the colours to make visible

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

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

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

    CSS Howto..

    How to float 3 LI's to the left and 3 to the right and maintain original sequence?

    How to use a variable in my href path in html

    How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?

    How to implement MVC style on my PHP/SQL/HTML/CSS code?

    How to float elements with different heights?

    On scroll up use the animate() and show the div

    CSS: How to make this kind layout?

    How to animate semicircle-like meter indicating elapsed time with HTML/CSS/JS?

    how to make div fixed and ot move upon window resize

    Show popup after page load

    Linking CSS button to email - How can it be done?

    How to prevent CSS table row expanding to parent height

    css code how to change active navigation button color

    how to put css max-left or min-left position to absolute object?

    How to create a full width background image with a variable height depending on content?

    CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

    How can you have your websites resolution change according to the users screen resolution?

    How to edit and see live CSS effect in IE8 like we see in Firefox > Web developer toolbar > Edit CSS function?

    How do I prevent jQuery from resetting all my CSS?

    CSS hover transition - how to remove delay?

    How to add JS and CSS file in web page based on parameter?

    How do I place a DIV class in a specific position over another DIV class?

    Using CSS, how can I change the alignment of a click-to-open UL menu?

    How to design resolution independent CSS elements?

    How to disable the letter tail from the last letter of a word in CSS?

    How to create a relative inline style?

    How do I code CSS to “change” when I load/pull content using ajax?

    how to update a css class dynamically onclick a dropdown jquery

    how to place one div on top of another, when both are centered using auto margin?

    How to force CSS refresh when using ASP.NET Themes?