简单用CSS实现三角形

CSS实现 三角形

看到一个面试问题：如何用css实现三角形，em，想到自己没写过，然后就实现了下。

方法：
（1）将div的宽高设置成0
（2）加boder属性（四个方向的边框可以实现不同方向的三角形）
实现的效果是这样的：

代码：

<div id="box1"></div>
    <br/>
<div id="box2"></div>

css样式：

<style>
    /* 彩色三角形 */
    
    #box1 {
        width: 0;
        height: 0;
        /* border: 50px solid red; */
        border-left: 50px solid red;
        border-right: 50px solid blue;
        border-top: 50px solid yellowgreen;
        border-bottom: 50px solid blueviolet;
    }
    /* 上三角 */
    
    #box2 {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid red;
    }
</style>