如何在CSS中旋轉背景？

Question

我想用純色實現傾斜/旋轉的背景div。

就像這樣：

我知道有一個小竅門與旋轉你的背景來創建倒角，但將它的工作在這裏？或者jQuery會做得更好？

我可能會遇到的第二個問題是覆蓋兩個背景div s的內容層（標記爲紅色）。

你能幫助我嗎？

在此先感謝，並對任何語言錯誤感到抱歉。

Answer 1

你可以用僞元素做到這一點。

http://jsfiddle.net/JDcF3/

我改變了顏色，使可見

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