如何在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; 
}