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

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

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

最佳答案

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

关于html - 如何使用CSS3绘制梯形/梯形？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7920754/