css实现三角形是常见的需求，在此记录如下
1 边框实现
原理：相邻的border之间会形成一条斜线(可按此联想记忆)
.triangle {width: 0;height: 0;border-left: 100px solid red;border-right: 100px solid green;border-top: 100px solid blue;border-bottom: 100px solid orange;}
注意：相邻的border形成的斜线，斜线一定是相邻产生
1
.triangle {width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid orange;}
- 下侧橙色，说明下侧有border，颜色为橙色
- 左侧斜线，右侧斜线，说明左右border有设置，没有颜色说明颜色是transparent
2
.triangle {width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid orange;}
- 上侧橙色，说明上侧有border,颜色为橙色
- 左侧斜线，右侧斜线，说明左右border有设置，没有颜色说明颜色是transparent
3
.triangle {width: 0;height: 0;border-top: 100px solid transparent;border-left: 100px solid orange;}
.triangle {width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 100px solid orange;}
两种理解：橙色是左下，斜线在橙色的右上，因为要两两相邻，只能下如下两种搭配
- 左侧橙色，说明左侧有border,颜色为橙色
- 上侧斜线，说明上侧border有设置，没有颜色说明颜色是transparent
或者
- 下侧橙色，说明下侧有border,颜色为橙色
- 右侧斜线，说明右侧border有设置，没有颜色说明颜色是transparent
4
.triangle {width: 0;height: 0;border-bottom: 100px solid transparent;border-left: 100px solid orange;}
.triangle {width: 0;height: 0;border-right: 100px solid transparent;border-top: 100px solid orange;}
两种理解：橙色是左上，斜线在橙色的右下，因为要两两相邻，只能下如下两种搭配
- 左侧橙色，说明左侧有border,颜色为橙色
- 下侧斜线，说明下侧border有设置，没有颜色说明颜色是transparent
或者
- 上侧橙色，说明上侧有border,颜色为橙色
- 右侧斜线，说明右侧border有设置，没有颜色说明颜色是transparent
5
.triangle {width: 0;height: 0;border-bottom: 100px solid transparent;border-right: 100px solid orange;}
.triangle {width: 0;height: 0;border-left: 100px solid transparent;border-top: 100px solid orange;}
两种理解：橙色是右上，斜线在橙色的左下，因为要两两相邻，只能下如下两种搭配
- 右侧橙色，说明右侧有border,颜色为橙色
- 下侧斜线，说明下侧border有设置，没有颜色说明颜色是transparent
或者
- 上侧橙色，说明上侧有border,颜色为橙色
- 左侧斜线，说明左侧border有设置，没有颜色说明颜色是transparent
6
.triangle {width: 0;height: 0;border-top: 100px solid transparent;border-right: 100px solid orange;}
.triangle {width: 0;height: 0;border-left: 100px solid transparent;border-bottom: 100px solid orange;}
两种理解：橙色是右下，斜线在橙色的左上，因为要两两相邻，只能下如下两种搭配
- 右侧橙色，说明右侧有border,颜色为橙色
- 上侧斜线，说明上侧border有设置，没有颜色说明颜色是transparent
或者
- 下侧橙色，说明下侧有border,颜色为橙色
- 左侧斜线，说明左侧border有设置，没有颜色说明颜色是transparent
2 线性渐变实现
原理：通过控制linear-gradient线性渐变角度和渐变距离（其实不是渐变，是拼色），使得从矩形一个角开始形成三角形
.triangle {width: 100px;height: 100px;background: linear-gradient(45deg, red, red 50%, orange 50%, orange);}
当把第二种颜色设置为透明时:
.triangle {width: 100px;height: 100px;background: linear-gradient(45deg, red, red 50%, transparent 50%, transparent);}
3 裁减路径实现
原理：通过clip-path，传递多边形路径坐标形成三角形
.triangle {width: 100px;height: 100px;background: orange;clip-path: polygon(0 0,100% 0, 100% 100%);
