Erstellen Sie ein trapezförmiges Div mit Clipped Überlauf

Question

Ich frage mich, ob jemand weiß, wenn überhaupt, wie man ein Trapez mit CSS/Html/Canvas erstellt.

Ich habe versucht, Hash-eins zusammen nur seine sehr chaotisch und wäre in der realen Welt unbrauchbar.

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 meine jsFiddle ...

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

Answer 1

Ich weiß nicht, was Sie wollen. also denke ich, das wird dir wenig helfen.

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

Sprechen Sie für so etwas bitte? Prüfe diese Geige: jsfiddle.net/WWYYM/3/. Lass es mich wissen, wenn es für dich funktioniert. Ich habe Ihren Code wie folgt geändert:

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

Sie können zusätzlich verwandeln gleichermaßen unter:

 

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

ich es mit 2 extra divs als Wrapper tun können.

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