[解決済み] css3で台形/トラペゾイドを描くには？

質問

ページにアクセスすると http://m.google.com モバイルSafariを使用すると、ページの上部に美しいバーが表示されます。

このような台形（US: trapezoids）をいくつか描きたいのですが、方法がわかりません。 css3 3d transformを使えばいいのでしょうか？ もし、良い方法があれば教えてください。

どのように解決するのですか？

以下のようなCSSを使用することができます。

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

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

このような図形を作るのは本当にクールです。

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

EDIT このCSSはDIV要素に適用されます。