css实现等边三角形与直角三角形

等边三角形的实现：

先来看一段代码~

 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