教你使用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>