잘라낸 오버플로로 '사다리꼴'모양의 div를 만듭니다.

Question

누구나 CSS/Html/Canvas를 사용하여 사지를 만드는 방법을 알고 있는지 궁금합니다.

해시 하나를 매우 혼란스럽게 정렬하려고 시도했지만 실제 세상에서는 사용할 수 없게되었습니다.

div { 
width:0; 
margin-left:-1000px; 
height:100px; 
border-right:1000px solid lightblue; 
border-top:60px solid transparent; 
border-bottom:60px solid transparent; 
padding-left:1000px; 
white-space:no-wrap; 
} 

Heres는 내 jsFiddle은 ...

http://jsfiddle.net/Liamatvenn/WWYYM/

Answer 1

난 당신이 원하는 모르겠어요. 그래서 나는 이것이 당신에게 조금 도움이 될 것 같아요.

div { 
    width:0; 
    margin-left:-100px; 
    height:100px; 
    border-right:100px solid lightblue; 
    border-top:60px solid transparent; 
    border-bottom:60px solid transparent; 
    padding-left:100px; 
    white-space:no-wrap; 
} 

Answer 2

제발 이런 식으로 말하는거야? 이 바이올린을 확인하십시오 : jsfiddle.net/WWYYM/3/. 그것이 당신을 위해 작동하는지 알려주세요. 나는 다음과 같은 코드를 편집 한 :

div { 
    border-bottom: 100px solid lightblue; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 500px; 
    white-space:no-wrap; 
    text-align:center; 
} 

Answer 3

당신은 또한 모두 아래 변환 할 수 있습니다 :

 

div { 
width:0; 
margin-left:-50px; 
margin-top: -500px; 
height:100px; 
border-right:100px solid lightblue; 
border-top:60px solid transparent; 
border-bottom:60px solid transparent; 
padding-left:1000px; 
white-space:no-wrap; 

transform:rotate(20deg); 
-ms-transform:rotate(20deg); /* IE 9 */ 
-webkit-transform:rotate(90deg); 
 

}

Answer 4

내가 래퍼 등이 개 추가 된 div와 함께 할 수 있습니다.

CSS는

.trapezium { 
    position: absolute; 
    left: 40px; 
    top: 40px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(6deg); 
    overflow: hidden; 
} 

.trapezium > div { 
    background-color: yellow; 
    position: absolute; 
    left: 0px; 
    top: 50px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(-12deg); 
    overflow: hidden; 
} 

.trapezium > div > div { 
    font-size: 60px; 
    background-color: yellow; 
    position: absolute; 
    left: 0px; 
    top: -30px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(6deg); 
    overflow: hidden; 
} 

demo