如何通过css来画三角形(border属性)

如何通过css来画三角形

三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid blue，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。

示例1：

 html:
    <div id="triangle"></div>
    <div class="line"></div><br>
    <div id="triangle-up"></div>
    <br>
 
 css:
  #triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid blue;
    }

    #triangle {
        width: 100px;
        height: 100px;
        border: 100px solid #000;
        border-top-color: red;
        border-bottom-color: yellow;
        border-left-color: blue;
        border-right-color: green;
    }
    .line {
        border: 1px solid red;
    }

如下图：
示例2 ：

#Triangle Top Right

        width: 0;
        height: 0;
        border-top: 100px solid blue;
        border-left: 100px solid transparent;

如下：

更多三角形的画法，可见：
https://www.cnblogs.com/chengxs/p/11406278.html