如何在CSS中旋转背景？

Question

我想用纯色实现倾斜/旋转的背景div。

像这样：

我知道旋转背景来创建倒角是有技巧的，但是可以在这里解决吗？ 还是jQuery会做得更好？

我可能遇到的第二个问题是覆盖两个背景div的内容层（标记为红色）。

你能帮我吗？

在此先感谢您，并感谢您的任何语言错误。

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