How to draw a trapezium/trapezoid with css3?

You can use some CSS like this:

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

<div id="trapezoid"></div>

Expand snippet

It is really cool to make all this shapes, Take a look to more nice shapes at:

http://css-tricks.com/examples/ShapesOfCSS/

EDIT: This css is applied to a DIV element