Cómo dibujar un trapecio / trapecio con css3?

Cuando vaya a la página http://m.google.com con Mobile Safari, verá la hermosa barra en la parte superior de la página.

Quiero dibujar algunos trapecios (EE. UU .: trapezoides) así, pero no sé cómo. ¿Debo usar css3 3d transform? Si tienes un buen método para lograrlo, dímelo.

Puedes usar un CSS como este:

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

Como esto ya es bastante viejo, creo que podría usarse con algunas nuevas respuestas actualizadas con algunas tecnologías nuevas.

Perspectiva de la transformación CSS

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

Tienes algunas opciones disponibles para ti. Simplemente puede usar una imagen, dibujar algo con svg o distorsionar un div regular con transformaciones css. Una imagen sería más fácil y funcionaría en todos los navegadores. Dibujar en svg es un poco más complejo y no se garantiza que funcione en todos los ámbitos.

Por otro lado, el uso de las transformaciones css significaría que tendrías que tener tus divs de forma en el fondo, luego superpondrás el texto real sobre ellos en otro elemento para que el texto no esté sesgado también. De nuevo, la compatibilidad con el navegador no está garantizada.