css 画三角形

搜索了很多三角形画法，自己总结记录一下：

使用div画三角形，使用div的四个边框进行绘制，

1、设置宽高都为0： width:0;height:0;

2、以border的四个边，进行绘制，固定某一边，比如上边框（就是不设置border-top），然后在设置其余三条边，固定了上边框，所以上边是不会移动的（div宽高都为0,所以是一个点），然后设置其余三条边框的宽度，也就是该边到固定的点（上顶点）的距离。

css如下：

                border-left: 50px solid transparent;
                /*50px为左顶点到上顶点的水平距离*/
                border-right: 0px solid transparent;
                /*100px为右顶点到上顶点的水平距离*/
                border-bottom: 100px solid red;
                /*200px为底线到上顶点的水平距离*/

示意图如下：

固定其他边，和此类似，如有不对，敬请指出。

还可以使用旋转角度进行图形的转换，达到想要的效果。

transform: rotate(90deg);支持正负数角度，对应顺、逆时针。