CSS 사용자 정의 모양

Question

가 어떻게 이런 걸 만들 수있다 : 지금까지

을 나는이 : jsfiddle.net/xmqfe3h0/9

#test { 
width: 315px; 
height: 90%; 
position: relative; 
} 

#test:before { 
content: ""; 
position: absolute; 
left: 70%; 
width: 0; 
height: 0; 
border-left: 10px solid transparent; 
border-right: 10px solid transparent; 
border-bottom: 50px solid black; 
} 

Answer 1

은 CSS3 모양에 왜곡을 추가

-webkit-transform: skew(40deg); 
    -moz-transform: skew(40deg); 
    -o-transform: skew(40deg); 

JSFIDDLE DEMO

Answer 2

직사각형과 삼각형으로 나누어야합니다. 삼각형은 CSS 변환 (회전이있는 중첩 상자)을 사용하여 생성 할 수 있습니다. 배경 이미지의 정확한 위치를 설정해야합니다.