css实现三角形-526互联

界面搭建<i></i>

1、右三角形

i {
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-left: 20px solid red;
    }

实现效果：

2、下三角形

i {
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-top: 20px solid red;
    }

实现效果：

3、上三角形

i {
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-bottom: 20px solid red;
    }

实现效果：

4、左三角形

i {
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-right: 20px solid red;
    }

实现效果：