在HTML项目中可以通过CSS设置一些常用的形状，想知道css如何制作梯形吗？下面我们来看一下css制作梯形的方法。
css制作梯形示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.trapezoid{
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 100px;
}
</style>
</head>
<body>
<div class="trapezoid"></div>
</body>
</html>
效果如下：
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
