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

  • Z时代
  • 2024-01-10
  • 分类：问答

使用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元素

以上是 如何使用CSS3绘制梯形/梯形？ 的全部内容， 来源链接： utcz.com/qa/427037.html

回到顶部