关于border属性的小技巧：制作三角形

标签的border属性包含了4根边框，而每根边框的交界处是斜45度，不是水平垂直相交，如下图：

利用这种特性，可以把div标签的高宽设为0，border设为大于0的像素，这样border就变为了一个色块，通过 border-color: 颜色/transparent来控制四个方向上的颜色或者是不是显示，4个颜色/transparent分别控制上右下左，顺时针方向

1 <style>
2         div {
3             height: 0px;
4             width: 0px;
5             border-width:50px;
6             border-color: red red transparent red;
7             border-style: solid;
8         }
9     </style>

该代码让下方border消失，如果再让右边border消失，则会在在左上角形成一个边为50px的等腰三角形，再让左边消失，那就会在正上方形成一个更小的三角形：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6       <style>
 7         div {
 8             width:0px;
 9             height:0px;
10             border:50px solid;
11             /* 平分效果 */
12             
13 
14             /* 单个三角形 */
15             border-color:red transparent transparent transparent;
16         }
17     </style>
18 </head>
19 
20 <body>
21     <div></div>
22 </body>
23 </html>

最终效果如图：

以下这段代码运行后可生成由四个大小不一的三角形组成的树木：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6     <style>
 7         #div {
 8             position:absolute;
 9             left: 400px;
10         }
11         .div1 {
12             height: 0px;
13             width: 0px;
14             border-width:50px;
15             border-color: transparent transparent green          transparent;
16             border-style: solid;
17         }
18         .div2 {
19             height: 0px;
20             width: 0px;
21             border-width:70px;
22             border-color: transparent transparent green transparent;
23             border-style: solid;
24             position: absolute;
25             left: -19px;
26             bottom: -40px
27         }
28         .div3 {
29             height: 0px;
30             width: 0px;
31             border-width:90px;
32             border-color: transparent transparent green transparent;
33             border-style: solid;
34             position: absolute;
35             left: -39px;
36             bottom: -80px
37         }
38         .div4 {
39             height: 0px;
40             width: 0px;
41             border-width:110px;
42             border-color: transparent transparent green transparent;
43             border-style: solid;
44             position: absolute;
45             left: -60px;
46             bottom: -134px
47         }
48         .div5 {
49             height: 200px;
50             width: 20px;
51             background-color: chocolate;
52             position: absolute;
53             bottom: -230px;
54             left: 40px;
55             z-index: -1;
56         }
57     </style>
58 </head>
59 
60 <body>
61     <div id="div">
62         <div class="div1"></div>
63         <div class="div2"></div>
64         <div class="div3"></div>
65         <div class="div4"></div>
66         <div class="div5"></div>
67         
68     </div>
69 </body>
70 </html>

最终效果：