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 can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    How can I animate the drawing of text on a web page?

    angularjs ui-grid changing column height to auto causes weird line to show up on other columns

    How do I evenly space radio buttons

    How do I use transitionend in jQuery?

    CSS: How to get position and size relative to screen width?

    How to change the width of bootstrap popover

    How to overwrite css style in a specific page?

    In CSS computed properties panel, the topmost style does not seem to overwrite the less specific style — how could that be?

    Preventing jquery's show/hide from adding inline style?

    How do i position a div relative to the window page (responsive css)

    How do you make an input element fill parent?

    How do I enable scrolling only in one direction in CSS?

    Load More / Show Less issues using jquery

    How to make layout with fixed sized column in Liferay?

    How to get the profile pic aligned center?

    How to manage textarea right side overflow in css?

    How to write css for each page in rails 3

    How to put
      around image in css

    how to make my HTML 'font' edge color match with background on css?

    CSS How to align two DIVs on the same line without using floats

    How to customise button ( CSS, HTML)

    How do I set my ul's margin after setting every padding and margin to zero in CSS? [closed]

    How do I get a div to fill the width regardless if the brower window is shrunk?

    how to deselect the active span element?

    How to make a HTML list appear horizontally instead of vertically using CSS only?

    jQuery UI Tooltip with Arrow, why/how does this code work?

    How to make a paragraph appear in a certain area in the page using Wordpress?

    How to add background-size in css based on image size?

    Given an url, how could a script find what resources are loaded?