html - How to draw a trapezium/trapezoid with css3?

Question

When you go to the page http://m.google.com using Mobile Safari, you will see the beautiful bar on the top of the page.

I wanna draw some trapeziums (US: trapezoids) like that, but I don't know how. Should I use css3 3d transform? If you have a good method to achieve it please tell me.

Answer 1

As this is quite old now, I feel it could use with some new updated answers with some new technologies.

CSS Transform Perspective

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}

<div class="trapezoid"></div>