Comment faire pivoter l'arrière-plan en CSS?

Question

Je souhaite obtenir un fond de fond incliné/pivoté avec des couleurs unies.

comme ceci:

Je sais qu'il ya un truc avec la rotation de votre arrière-plan pour créer des coins chanfreinés, mais ça va fonctionner ici? Ou jQuery fera mieux?

Le deuxième problème que je pourrais avoir avec ceci est une couche de contenu (marqué comme rouge) superposant les deux arrière-plans div s.

Pouvez-vous m'aider s'il vous plaît?

Merci d'avance, et désolé pour toute erreur de langue.

Answer 1

Vous pouvez le faire avec des pseudo-éléments.

http://jsfiddle.net/JDcF3/

J'ai changé les couleurs pour rendre 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; 
}