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