Tạo một hình dạng 'hình thang' div với Clipped tràn

Question

Im tự hỏi nếu ai biết nếu có thể, làm thế nào để tạo ra một hình thang bằng cách sử dụng CSS/Html/Canvas.

Tôi đã cố gắng để sắp xếp một băm với nhau chỉ rất lộn xộn của nó và sẽ không thể sử dụng được trong thế giới thực.

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 tôi ...

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

Answer 1

i don `t biết những gì bạn muốn. vì vậy tôi đoán điều này sẽ giúp bạn ít.

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

Bạn đang nói về điều gì đó như thế này? Kiểm tra fiddle này: jsfiddle.net/WWYYM/3/. Hãy cho tôi biết nếu nó làm việc cho bạn. Tôi đã chỉnh sửa mã của bạn như sau:

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

bạn có thể bổ sung chuyển đổi cũng như dưới đây:

 

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

tôi có thể làm điều đó với 2 divs thêm như giấy gói.

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