使用border绘制各种三角形

1.元素的边框展示

元素的边框展示



.all-triangle {
        width: 0;
        border: 50px solid;
        border-color: red blue green goldenrod;
    }

2.朝下的三角形

朝下的三角形



.down-triangle {
        width: 0;
        border: 10px solid;
        border-color: red transparent transparent transparent;
    }

3.朝上的三角形

朝上的三角形


.up-triangle {
        width: 0;
        border: 10px solid;
        border-color: transparent transparent red transparent;
    }

4.朝左的三角形

朝左的三角形


.left-triangle {
        width: 0;
        border: 10px solid;
        border-color: transparent red transparent transparent;
    }

5.朝右的三角形

朝右的三角形


.right-triangle {
        width: 0;
        border: 10px solid;
        border-color: transparent transparent transparent red;
    }

6.一侧开口的三角形（1）

一侧开口的三角形（1）


 .yckk1-triangle {
        width: 0;
        border: 50px solid;
        border-width: 30px 15px 30px 15px;
        border-color: red red transparent transparent;
    }

7.一侧开口的三角形（2）

一侧开口的三角形（2）

.yckk2-triangle {
        width: 0;
        border: 50px solid;
        border-width: 30px 15px 30px 15px;
        border-color: transparent transparent red red;
    }

8.一侧开口的三角形（3）

一侧开口的三角形（3）


    .yckk3-triangle {
        width: 0;
        border: 50px solid;
        border-width: 30px 15px 30px 15px;
        border-color: red transparent transparent red;
    }

9.一侧开口的三角形（4）

一侧开口的三角形（4）

 .yckk4-triangle {
        width: 0;
        border: 50px solid;
        border-width: 30px 15px 30px 15px;
        border-color: transparent red red transparent;
    }

10.向下的梯形

向下的梯形


.down-ladder-type {
        width: 10px;
        height: 10px;
        border: 20px solid;
        border-color: red transparent transparent transparent;
    }