利用border画三角形

方法一：直角三角形

完整代码

div{
    width: 0;
    height: 0;
    border: 100px solid white;
    border-top-color: red;
    border-bottom: none;
}

效果图

原理：

先将我们的元素宽高设置为0，然后利用border设置实线白底边框，最后只设置边框顶部颜色，取消底部，就实现了直角三角形

方法二：等腰三角形

完整代码

div{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    /* 通过border-left和border-right中的像素值来改变三角形的行踪 */
    border-left: 150px solid white;
    border-right: 150px solid white;
}

效果图

原理

原理与第一个正好相反，是单独设置上左右边框。先设置元素宽高为0，然后设置顶部边框的像素、实线和颜色，
最后分别设置左右边框的像素、实线和白色边框色。
PS：border-left和border-rigth的不同像素可以设置不同的三角形。