Create a 'trapezium' shaped div with Clipped overflow

Question

Im wondering if anybody know if at all possible, how to create a trapezium using CSS/Html/Canvas.

I've tried to sort of hash one together only its very messy and would be unusable in the real world.

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

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

Answer 1

I can do it with 2 extra divs as wrappers.

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

Answer 2

i don`t know what you want. so i guess this will help you little.

  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 3

Are you speaking for something like this please ? Check this fiddle: jsfiddle.net/WWYYM/3/ . Let me know if it works for you. I have edited your code like the following:

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 4

you can addition transform alike below:

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);


}