CSS로 divs를 왜곡하는 방법

Question

나는 div와 궁리를하는 방법을 궁리/아래쪽과 오른쪽을 약간 왜곡 수 있습니다.

삼각형을 만들 수 있고 모든면을 비뚤어지게 만들 수 있습니다. 두면을 비뚤어지게 만드는 방법을 모르겠습니다.

이것이 가능합니까? 감사.

Answer 1

:before 및 :after CSS 선택기를 사용하면 가능할 수도 있습니다. 방금 모범을 보았습니다.

JSFiddle

HTML :

<div class="slanted"></div> 

CSS :

.slanted { 
    position: relative; 
    height: 200px; 
    width: 380px; 
    min-width: 380px; 
    max-width: 380px; 
    background: #000; 
} 

.slanted:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-right: 180px solid #000; 
    border-top: 100px solid #000; 
    border-bottom: 100px solid #fff; /* page background color */ 
} 

.slanted:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    border-left: 200px solid #000; 
    border-bottom: 200px solid #fff; /* page background color */ 
} 

Answer 2

는 새로운 브라우저에서는, 당신은 CSS의 변환을 사용할 수 있습니다.

-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); 
-o-transform: matrix(1, 0, 0.6, 1, 250, 0); 
transform: matrix(1, 0, 0.6, 1, 250, 0); 

이 결과는 다음과 같이 보일 것입니다 :이 코드는 사업부를 왜곡합니다

JSFiddle

모질라 개발자 네트워크 다른 변환에 대한 자세한 이야기 ​​an article있다 신청할 수 있습니다. 또한 몇 가지 예가 있으며 details about browser compatibility이 있습니다.