如何使用CSS3绘制梯形/梯形？

Question

使用Mobile Safari
转到http://m.google.com页面时，您会在页面顶部看到漂亮的栏。

我想那样画一些梯形（美国：梯形），但我不知道怎么做。我应该使用CSS3 3D转换吗？如果您有实现此目标的好方法，请告诉我。

Answer 1

您可以使用以下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/

编辑：此css应用于DIV元素