CSS实现超简单三角形

整体思路：

对一个盒子的4条边框（上下左右）分别进行操作来实现一个简单三角形。

具体步骤：

1、创建一个盒子，不要设置任何属性；

2、将上下左右分别视为4个参照位置，将待实现的三角形的底边所在的位置视为a；

3、将盒子的a位置的边框设置为有色边框，边框大小和边框样式自定义；

4、将盒子的剩余3个位置的边框设置为透明边框，边框大小和边框样式自定义。

接着就可以看到一个三角形了

注意点：

1、盒子的四条边框只有颜色不相同，其余属性（大小、样式）都要相同；

2、可以通过对边框的大小进行设置，来调整三角形的大小；

3、可以通过对边框的颜色进行设置，来调整三角形的颜色。

例子：

实现一个底边在上，颜色为红色的大三角形

div {
    width: 0;
    height: 0;
    border-top: 100px #d2334a solid;    //三角形的底边在上
    border-left: 100px rgba(0, 0, 0, 0) solid;
    border-bottom: 100px rgba(0, 0, 0, 0) solid;
    border-right: 100px rgba(0, 0, 0, 0) solid;
}

实现一个底边在下，颜色为紫色的小三角形：

div {
    width: 0;
    height: 0;
    border-bottom: 50px #4833d2 solid;
    border-left: 50px rgba(0, 0, 0, 0) solid;
    border-top: 50px rgba(0, 0, 0, 0) solid;
    border-right: 50px rgba(0, 0, 0, 0) solid;
}