利用border属性制作各种图形。

这是一个比较正常的

但如果我们把宽度和高度去掉呢？

好像看不太出来对吧，我们来给边框加上不同颜色。

看出啥了没，分明就是每个边都是一个三角形啊。

那假如我想要一个朝下的三角形是不是我只要把border-top给显示出来，其他的隐藏就好了啊。OK，说干就干

transparent表示透明，所以可以当做隐藏来使用。你可能会说那直接只设置border-top不就好了吗，但你可以发现是不行的，你试试就知道了。

单个：

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #item1{
 8             width:0px;
 9             height:0px;
10             border:30px solid transparent;
11             border-top:30px solid red;
12         }
13         #item2{
14             width:0px;
15             height:0px;
16             border:30px solid transparent;
17             border-left:30px solid green;
18         }
19         #item3{
20             width:0px;
21             height:0px;
22             border:30px solid transparent;
23             border-bottom:30px solid pink;
24         }
25         #item4{
26             width:0px;
27             height:0px;
28             border:30px solid transparent;
29             border-right:30px solid lightblue;
30         }
31     </style>
32 </head>
33 <body>
34     <div id="item1"></div>
35     <div id="item2"></div>
36     <div id="item3"></div>
37     <div id="item4"></div>
38 </body>
39 </html>

两个组合：

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #item1{
 8             width:0px;
 9             height:0px;
10             border:30px solid transparent;
11             border-top:30px solid red;
12             border-right:30px solid red;
13         }
14         #item2{
15             width:0px;
16             height:0px;
17             border:30px solid transparent;
18             border-top:30px solid green;
19             border-left:30px solid green;
20         }
21         #item3{
22             width:0px;
23             height:0px;
24             border:30px solid transparent;
25             border-top:30px solid pink;
26             border-bottom:30px solid pink;
27         }
28         #item4{
29             width:0px;
30             height:0px;
31             border:30px solid transparent;
32             border-right:30px solid lightblue;
33             border-bottom:30px solid lightblue;
34         }
35         #item5{
36             width:0px;
37             height:0px;
38             border:30px solid transparent;
39             border-right:30px solid lightsalmon;
40             border-left:30px solid lightsalmon;
41         }
42         #item6{
43             width:0px;
44             height:0px;
45             border:30px solid transparent;
46             border-bottom:30px solid red;
47             border-left:30px solid red;
48         }                    
49     </style>
50 </head>
51 <body>
52     <div id="item1"></div>
53     <div id="item2"></div>
54     <div id="item3"></div>
55     <div id="item4"></div>
56     <div id="item5"></div>
57     <div id="item6"></div>
58 </body>
59 </html>

三个组合：

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #item1{
 8             width:0px;
 9             height:0px;
10             border-left:30px solid transparent;
11 
12             border-top:30px solid red;
13             border-right:30px solid red;
14             border-bottom:30px solid red;
15         }
16         #item2{
17             width:0px;
18             height:0px;
19             border-bottom:30px solid transparent;
20 
21             border-top:30px solid green;
22             border-right:30px solid green;
23             border-left:30px solid green;
24         }
25         #item3{
26             width:0px;
27             height:0px;
28             border-right:30px solid transparent;
29 
30             border-top:30px solid pink;
31             border-left:30px solid pink;
32             border-bottom:30px solid pink;
33         }
34         #item4{
35             width:0px;
36             height:0px;
37             border-top:30px solid transparent;
38 
39             border-right:30px solid lightblue;
40             border-left:30px solid lightblue;
41             border-bottom:30px solid lightblue;
42         }
43     </style>
44 </head>
45 <body>
46     <div id="item1"></div>
47     <div id="item2"></div>
48     <div id="item3"></div>
49     <div id="item4"></div>
50 </body>
51 </html>

配合宽度使用。

注意宽度别超过边框长度。

平行四边形

完。