一、css画各种三角形的原理
1、基础原理
当div宽度为0，高度为0的时候，只设置border的大小和四边不同颜色可看到下图，只保留一边的颜色，另外三边的颜色设置为transparent可得到一个方向的三角形。因此，可延伸出设置一边的border的颜色，相邻两边的border设置为transparent可得到一个方向的三角形。
image.png
<div id="triangle"></div>
<style>
#triangle{
width: 0;
height: 0;
border: 100px solid;
border-top-color: #000;
border-right-color: red;
border-left-color: yellow;
border-bottom-color: blue;
}
</style>
2、等腰锐角三角形
border的大小的值为三角形底边上的高，三角形的底为相邻两边的border的高的和，如下图所示的红色锐角三角形
image.png
<div id="triangle"></div>
<style>
#triangle{
width: 0;
height: 0;
border-left: 50px solid yellow;
border-right: 50px solid green;
border-bottom: 100px solid red;
}
</style>
3、直角在正方形四个方向的直角三角形
若想实现直角三角形的效果，如下图所示直角在左上的三角形，按原理可设置上border和左border的颜色，另外两条边的颜色为transparent，此样式可简写为只设置上border的颜色，另一条相邻的右border为transparent
image.png
<div id="triangle"></div>
<style>
#triangle{
width: 0;
height: 0;
border: 100px solid;
border-top-color: red;
border-right-color: transparent;
border-left-color: red;
border-bottom-color: transparent;
}
</style>
//简写
#triangle-top-left{
width: 0;
height: 0;
border-right: 100px solid transparent;
border-top: 100px solid red;
}
4、其他奇形怪状三角形
你也许会遇到要画个奇怪三角形的时候，只要参考锐角三角形的方式，找到三角形底边和高，计算出三角形高和把相邻两条边的高相加作为底部，你可以画出各种各样的三角形，如果再加上角度旋转的css，你便啥三角形都能画！
image.png
#triangle-weird{
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 300px solid transparent;
border-bottom: 100px solid red;
transform: rotate(20deg);
}
5、带边框的三角形/空心三角形
image.png
此类三角形解决思路通常使用两个不同颜色的三角形做颜色叠加，比如做如上图所示的边框为1px的红色边框白色底三角形，就先画一个红色三角形，再画一个尺寸少2px的白色底三角形，然后设置两个三角形的position将三角形重叠，这里使用伪元素实现
#triangle-hollow{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#triangle-hollow:after{
content:'';
position: absolute;
top: 1px;
left: -98px;
width: 0;
height: 0;
border-left: 98px solid transparent;
border-right: 98px solid transparent;
border-bottom: 98px solid white;
}
二、常见三角形的实现
1、向上正箭头
image.png
#triangle-up{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid palevioletred;
}
2、向下正箭头
image.png
#triangle-down{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid palevioletred;
}
3、向左正箭头
image.png
#triangle-left{
width: 0;
height: 0;
border-left: 100px solid palevioletred;
border-bottom: 100px solid transparent;
border-top: 100px solid transparent;
}
4、向右正箭头
image.png
#triangle-right{
width: 0;
height: 0;
border-bottom: 100px solid transparent;
border-right: 100px solid palevioletred;
border-top: 100px solid transparent;
}
5、向左上箭头
#triangle-top-left{
width: 0;
height: 0;
border-right: 100px solid transparent;
border-top: 100px solid palevioletred;
}
6、向右上箭头
image.png
#triangle-top-right{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-top: 100px solid palevioletred;
}
7、向左下箭头
image.png
#triangle-down-left{
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 100px solid palevioletred;
}
8、向右下箭头
image.png
#triangle-down-right{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-bottom: 100px solid palevioletred;
}
