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