教你使用css属性绘制梯形与三角形，其实这个问题主要考察对于盒子模型的结构的一个分析，本人面试也曾被坑过，
一个元素的盒子模型结构是这样的，
接下来我把所有的情况都列举了下来，
以下为代码：
<!DOCTYPE html>
<html>
<head>
<style>
div {
/*height: 100px;*/
width: 60px;
height: 0px;
/*border: 10px solid #000;*/
border-top: 30px solid #000;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}
#div2 {
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #000;
border-left: 30px solid transparent;
}
#div3 {
border-top: 30px solid #000;
border-right: 0px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}
#div4 {
border-top: 30px solid #000;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 0px solid transparent;
}
#div5 {
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #000;
border-left: 0px solid transparent;
}
#div6 {
border-top: 30px solid transparent;
border-right: 0px solid transparent;
border-bottom: 30px solid #000;
border-left: 30px solid transparent;
}
#div7 {
border-top: 30px solid transparent;
border-right: 30px solid #000;
border-bottom: 30px solid transparent;
border-left: 30px solid #000;
}
#div8 {
border-top: 30px solid transparent;
border-right: 30px solid #000;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}
#div9 {
border-top: 30px solid transparent;
border-right: 0px solid transparent;
border-left: 30px solid #000;
border-bottom: 30px solid transparent;
}
#div10 {
width: 0px;
border-top: 30px solid #000;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid transparent;
}
#div11 {
width: 0px;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid #000
}
#div12 {
width: 0px;
border-top: 30px solid transparent;
border-right: 0px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid #000
}
#div13 {
width: 0px;
border-top: 30px solid #aaa;
border-right: 30px solid #555;
border-left: 30px solid #000;
border-bottom: 30px solid #888;
}
#div14 {
width: 60px;
height: 100px;
/* border: 10px solid #000; */
border-top: 30px solid #444;
border-right: 30px solid #555;
border-bottom: 30px solid #888;
border-left: 30px solid #bbb;
}
</style>
</head>
<body>
1、顶部长的梯形，(右，下，左透明, 边宽30px)
<div></div>
2、底部长的梯形，(上，右，左透明, 边宽30px)
<div id="div2"></div>
3、顶部右长直的梯形，(右，下，左透明, 右边宽0px)
<div id="div3"></div>
4、顶部左长直的梯形，(右，下，左透明, 左边宽0px)
<div id="div4"></div>
5、底部左长直的梯形，(上，右，左透明, 左边宽0px)
<div id="div5"></div>
6、底部右长直的梯形，(上，右，左透明, 右边宽0px)
<div id="div6"></div>
7、一对三角形，（上下透明，左右宽30px）
<div id="div7"></div>
8、右三角形，（上下左透明，右宽30px）
<div id="div8"></div>
9、左三角形，(上右下透明, 左宽30px)
<div id="div9"></div>
10、上三角形，（内容宽为0, 右，下，左三角形透明，上给颜色）
<div id="div10"></div>
11、下三角形，（内容宽为0, 上，右，左三角形透明，下给颜色）
<div id="div11"></div>
12、下直角三角形，（下三角形基础上，给右边为0宽度，其他方向三角形同理）
<div id="div12"></div>
13、4个三角形，（内容宽为0, 4个边给颜色）
<div id="div13"></div>
14、一个元素的模型，上右下左的border边是这样分配的
<div id="div14"></div>
</body>
</html>