在設計稿中，經常會遇到使用三角形的樣式，可以使用img顯示，icon，svg或者前端自己實現，簡單粗暴直接上程式碼：

• 實體三角形：

首先先來實現一個正方形

 1 <div class="triangleBox" />
 2 
 3 .triangleBox {
 4     width: 0;
 5     height: 0;
 6     border-top: 50px solid red;
 7     border-right: 50px solid orange;
 8     border-bottom: 50px solid yellow;
 9
 
     border-left: 50px solid green;
10   }

由上面的程式碼可以看出正方形是由border拼湊出來的,那麼展示top箭頭的樣式，可以先用border設定一個透明盒子，這樣即可展示出border-top的樣式，以此類推：

 1 方案一：
 2  <div class="triangle01" />
 3  
 4  .triangle01 {
 5      width: 0;
 6      height: 0;
 7      border: 50px solid transparent;
 8      border-top: 50px solid red;
 
 9    }
10 
11 
12 方案二：
13 <div class="triangle top" />
14 
15  .triangle {
16     position: relative;
17     width: 0;
18     height: 0;
19     border: 50px solid;
20     border-color: #cddc39 transparent transparent transparent;
21   }
22  .triangle.top {
23     transform: rotate(0deg);
24   }

 1 方案一： 
 2 <div class="triangle02" />
 3  
 4   .triangle02 {
 5      width: 0;
 6      height: 0;
 7      border: 50px solid transparent;
 8      border-right: 50px solid orange;
 9    }
10 
11 
12 方案二：
13 <div class="triangle right" />
14 
15   .triangle {
16     position: relative;
17     width: 0;
18     height: 0;
19     border: 50px solid;
20     border-color: #cddc39 transparent transparent transparent;
21   }
22  .triangle.right {
23     transform: rotate(90deg);
24   }

 1 方案一：
 2   <div class="triangle03" />
 3  
 4  .triangle03 {
 5      width: 0;
 6      height: 0;
 7      border: 50px solid transparent;
 8      border-bottom: 50px solid yellow;
 9    }
10 
11 
12 方案二：
13 <div class="triangle bottom" />
14 
15   .triangle {
16     position: relative;
17     width: 0;
18     height: 0;
19     border: 50px solid;
20     border-color: #cddc39 transparent transparent transparent;
21   }
22   .triangle.bottom {
23     transform: rotate(180deg);
24   }

 1  方案一：
 2  <div class="triangle04" />
 3 
 4   .triangle04 {
 5      width: 0;
 6      height: 0;
 7      border: 50px solid transparent;
 8      border-left: 50px solid green;
 9    }
10 
11 
12 方案二：
13 <div class="triangle left" />
14 
15  .triangle {
16     position: relative;
17     width: 0;
18     height: 0;
19     border: 50px solid;
20     border-color: #cddc39 transparent transparent transparent;
21   }
22   .triangle.left {
23     transform: rotate(270deg);
24   }

 1 圖一：
 2 <div class="triangle05" />
 3 
 4   .triangle05 {
 5     width: 0;
 6     height: 0;
 7     border: 60px solid transparent;
 8     border-bottom: 130px solid pink;
 9   }
10 
11 圖二：
12 <div class="triangle06" />
13 
14   .triangle05 {
15     width: 0;
16     height: 0;
17     border: 100px solid transparent;
18     border-bottom: 130px solid pink;
19   }
20 
21 圖三：
22 <div class="triangle07" />
23 
24   .triangle05 {
25     width: 0;
26     height: 0;
27     border: 130px solid transparent;
28     border-bottom: 130px solid pink;
29   }

 1 圖一：
 2  <div class="triangle-topleft" />
 3 
 4   .triangle-topleft {
 5     width: 0;
 6     height: 0;
 7     border-top: 100px solid yellow;
 8     border-right: 100px solid transparent;
 9   }
10 
11 
12 圖二：
13  <div class="triangle-topright" /> 
14 
15   .triangle-topright {
16     width: 0;
17     height: 0;
18     border-top: 100px solid yellow;
19     border-left: 100px solid transparent;
20   }
21 
22 
23 圖三：
24  <div class="triangle-bottomleft" />
25 
26   .triangle-bottomleft {
27     width: 0;
28     height: 0;
29     border-bottom: 100px solid yellow;
30     border-right: 100px solid transparent;
31   }
32 
33 
34 圖四：
35  <div class="triangle-bottomright" />
36 
37   .triangle-bottomright {
38     width: 0;
39     height: 0;
40     border-bottom: 100px solid yellow;
41     border-left: 100px solid transparent;
42   }

• 箭頭三角形

 1 <div class="arrow top" />   // 第一個
 2 <div class="arrow right" />   // 第二個
 3 <div class="arrow bottom" />  //  第三個
 4 <div class="arrow left" />   //  第四個
 5 
 6 
 7   .arrow {
 8     display: inline-block;
 9     margin-right: 50px;
10     width: 0;
11     height: 0;
12     border: 26px solid;
13     border-color: transparent #cddc39 transparent transparent;
14     position: relative;
15   }
16 
17   .arrow::after {
18     content: '';
19     position: absolute;
20     /* 通過位移覆蓋背景 */
21     right: -30px;
22     top: -26px;
23     border: 26px solid;
24     border-color: transparent #fff transparent transparent;
25   }
26 
27   .arrow.top {
28     transform: rotate(90deg);
29     margin-bottom: 100px;
30   }
31 
32   .arrow.right {
33     transform: rotate(0deg);
34     margin-bottom: 100px;
35   }
36 
37   .arrow.bottom {
38     transform: rotate(270deg);
39     margin-bottom: 100px;
40   }
41 
42   .arrow.left {
43     transform: rotate(180deg);
44     margin-bottom: 100px;
45   }