How to make a triangle compatible with all browsers using css

this article mainly introduces how to use css to create a triangle that is compatible with all browsers. it has certain reference value. interested friends can refer to it. i hope it will be helpful to you!

use css to write triangles, compatible with ie7

.arrow-up { 
        width:0px; 
        height:0px; 
        border-left:10px solid transparent;  
        border-right:10px solid transparent; 
        border-bottom:10px solid red;  
        font-size:0px; 
        line-height:0px;
        margin: 0 auto;
    } 

    .arrow-down { 
        width:0px; 
        height:0px; 
        border-left:10px solid transparent; 
        border-right:10px solid transparent; 
        border-top:10px solid blue; 
        font-size:0px; 
        line-height:0px; 
    } 
        
    .arrow-left { 
        width:0px; 
        height:0px; 
        border-bottom:10px solid transparent; 
        border-top:10px solid transparent; 
        border-right:10px solid #DC143C; 
        font-size:0px; 
        line-height:0px;
    } 
    .arrow-right { 
        width:0px; 
        height:0px; 
        border-bottom:10px solid transparent; 
        border-top:10px solid transparent; 
        border-left:10px solid #FF00FF; 
        font-size:0px; 
        line-height:0px; 
    }

the effect is as follows:

the above is this article that’s all. i hope you all like it.

【recommended tutorials】

1. css video tutorial
2. css online manual
3. bootstrap tutorial