小编典典

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

css

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

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


阅读 839

收藏
2020-05-16

共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元素

2020-05-16