クリッピングされたオーバーフローで「台形」の形をした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

私はあなたが欲しいものを知っ `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

このようなものについて話していますか？これを確認してください：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

は私がラッパーとして2つの余分な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