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