css实现三角形

界面搭建<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;
    }  

实现效果：