css3画出不同的三角形

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40283784/article/details/87220799

向上的三角形：

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

向下的三角形：

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid blue;
}

向右的三角形：

#triangle-up {
    width: 0;
    height: 0;
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
    border-left: 100px solid blue;
}

向左的三角形：

#triangle-up {
    width: 0;
    height: 0;
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
    border-right: 100px solid blue;
}

结论：四个border必然有一个border的宽度为0，剩下的三条边则分别对应三角形的三条边的长度。