边框是实现三角形的部分，边框实际上并不是一个直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形

当分别取消边框的时候，发现下面几种情况：

• 取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的
• 当仅有邻边时， 两个边会变成对分的三角
• 当保留边没有其他接触时，极限情况所有东西都会消失
• 

通过上图的变化规则，利用旋转、隐藏，以及设置内容宽高等属性，就能够实现其他类型的三角形

复制 1
 2
 3  .obtuseB {
 4    border-width: 0px 40px 40px 40px;
 5    border-color: transparent transparent #4285f4 transparent;
 6  }
 7
 8  .obtuseL {
 9    border-width: 40px 0px 40px 40px;
10    border-color: transparent transparent transparent #d9534f;
11  }
12
13  .obtuseR {
14    border-width: 40px 40px 40px 0px;
15    border-color: transparent #42f4aa transparent transparent;
16  }
17
18  .obtuseT {
19    border-width: 40px 40px 0px 40px;
20    border-color: #e8f442 transparent transparent transparent;
21  }
22
23  
24  .obtuseB.empty {
25    position: relative;
26    border-width: 0 40px 40px 40px;
27    border-color: transparent transparent yellow transparent;
28  }
29  .obtuseB.empty::after {
30    content: '';
31    border-style: solid;
32    border-width: 0 35px 35px 35px;
33    border-color: transparent transparent #fff transparent;
34    position: absolute;
35    left: -35px;
36    top: 3px
37  }
38
39  .obtuseL.empty {
40    position: relative;
41    border-width: 40px 0 40px 40px;
42    border-color: transparent transparent transparent #d9534f;
43  }
44  .obtuseL.empty::after {
45    content: '';
46    border-style: solid;
47    border-width: 35px 0 35px 35px;
48    border-color: transparent transparent transparent #fff;
49    position: absolute;
50    left: -38px;
51    top: -35px
52  }
53
54  .obtuseR.empty {
55    position: relative;
56    border-width: 40px 40px 40px 0;
57    border-color: transparent #42f4aa transparent transparent;
58  }
59  .obtuseR.empty::after {
60    content: '';
61    border-style: solid;
62    border-width: 35px 35px 35px 0;
63    border-color: transparent #fff transparent transparent;
64    position: absolute;
65    left: 3px;
66    top: -35px;
67  }
68
69  .obtuseT.empty {
70    position: relative;
71    border-width: 40px 40px 0px 40px;
72    border-color: #e8f442 transparent transparent transparent;
73  }
74  .obtuseT.empty::after {
75    content: '';
76    border-style: solid;
77    border-width: 35px 35px 0px 35px;
78    border-color: #fff transparent transparent transparent;
79    position: absolute;
80    left: -35px;
81    top: -38px;
82  }
83
84  
85  .equalSidesB {
86    border-width: 0px 40px 60px 40px;
87    border-color: transparent transparent blue transparent;
88  }
89
90  .equalSidesL {
91    border-width: 40px 0px 40px 60px;
92    border-color: transparent transparent transparent red;
93  }
94
95  .equalSidesR {
96    border-width: 40px 60px 40px 0px;
97    border-color: transparent green transparent;
98  }
99
100  .equalSidesT {
101    border-width: 60px 40px 0px 40px;
102    border-color: yellow transparent transparent transparent;
103  }
104
105  
106  .rightBL {
107    border-width: 40px;
108    border-color: transparent transparent blue blue;
109  }
110
111  .rightTL {
112    border-width: 40px;
113    border-color: red transparent transparent red;
114  }
115
116  .rightTR {
117    border-width: 40px;
118    border-color: green green transparent transparent;
119  }
120
121  .rightBR {
122    border-width: 40px;
123    border-color: transparent yellow yellow transparent;
124  }

复制 1// html
 2<h1>钝角三角形：</h1>
 3  <div class="container">
 4    <div class="obtuseB triangle"></div>
 5    <div class="obtuseL triangle"></div>
 6    <div class="obtuseR triangle"></div>
 7    <div class="obtuseT triangle"></div>
 8  </div>
 9
10  <h1>钝角空心三角形：</h1>
11  <div class="container">
12    <div class="obtuseB empty triangle"></div>
13    <div class="obtuseL empty triangle"></div>
14    <div class="obtuseR empty triangle"></div>
15    <div class="obtuseT empty triangle"></div>
16  </div>
17
18  <h1>等边三角形：</h1>
19  <div class="container">
20    <div class="equalSidesB triangle"></div>
21    <div class="equalSidesL triangle"></div>
22    <div class="equalSidesR triangle"></div>
23    <div class="equalSidesT triangle"></div>
24  </div>
25
26  <h1>直角三角形：</h1>
27  <div class="container">
28    <div class="rightBL triangle"></div>
29    <div class="rightTL triangle"></div>
30    <div class="rightTR triangle"></div>
31    <div class="rightBR triangle"></div>
32  </div>