使用 border 

【解释】不设置宽高，用边框大小控制三角型大小

【分解步骤】

设置一个div不设宽高

【示例】

<style>
    #triangle{
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: orangered skyblue gold yellowgreen;
    }
</style>

2. 设置透明

留下想要指向方向相反的边框设定，其他方向的边框设为transparent透明

【示例】实现指向向上的三角形

<style>
    .Up{
        width: 0;
        height: 0;
        border-top: 100px solid transparent; 
        border-right: 100px solid transparent;
        border-left: 100px solid transparent;
        border-bottom: 100px solid orangered;
    }
</style>