html - CSSで背景を回転させる方法は？

Question

単色で斜め/回転した背景divを実現したい。

ちょうどこのような：

背景を回転させて面取りされたコーナーを作成するトリックがあることは知っていますが、ここでうまくいくでしょうか？または、jQueryの方がうまくいくでしょうか？

これで発生する可能性のある2番目の問題は、2つの背景をオーバーレイするコンテンツレイヤー（赤でマーク）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;
}