如何做出html直角梯形效果,css怎么做梯形？

在HTML项目中可以通过css设置一些常用的形状，想知道css如何制作梯形吗？下面我们来看一下css制作梯形的方法。

css制作梯形示例：

Document

.trapezoid{

border-bottom: 100px solid red;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

width: 100px;

}

效果如下：

border-bottom 简写属性把下边框的所有属性设置到一个声明中。

可以按顺序设置如下属性：border-bottom-width：规定下边框的宽度。

border-bottom-style：规定下边框的样式。

border-bottom-color：规定下边框的颜色。

border-left 简写属性把左边框的所有属性设置到一个声明中。

可以按顺序设置如下属性：border-left-width

border-left-style

border-left-color

border-right 简写属性把右边框的所有属性设置到一个声明中。

可以按顺序设置如下属性：border-right-width

border-right-style

border-right-color