等边三角形的实现：
先来看一段代码~
span{
height: 0;
line-height: 0;
font-size: 0;
width: 0;
border-color: #FF6666 #6666FF #999999 rebeccapurple;
border-style: solid;
border-width: 50px;
}
border-style：渲染边框的显示方式
border-width：分别代表边框的宽度，边框的宽度是根据三角形的顶点到底边的距离。，也就是三角形的高。
得出以下图形：
image.png
由上图可知，要是想得到一个正三角形的话，只要将其余的三边的颜色变成透明即可
span{
height: 0;
line-height: 0;
font-size: 0;
width: 0;
border-color: transparent transparent #999999 transparent;
/*border-top-width设置为0,为了让透明的顶部的三角形不占据空间*/
border-style: solid;
border-width: 0px 50px 50px 50px;
}
得出以下图形：
image.png
直角三角形的实现：
image.png
三角形的高度：
根据border-width来确定
三角形的底宽：
根据相邻的两边的两个三角形的宽度来确定，上图中蓝色的三角形的底部宽度是由左边三角形border-left-width和右边三角形border-right-width两个相加来确定的
那么要是我们要做一个直角三角形，则将一边的宽度设置为0即可
span{
height: 0;
line-height: 0;
font-size: 0;
width: 0;
border-color: transparent transparent #999999 transparent;
/*border-top-width设置为0,为了让透明的顶部的三角形不占据空间*/
border-style: solid;
border-width: 0px 0px 50px 50px;
}
image.png
