Comment rendre un triangle compatible avec tous les navigateurs en utilisant CSS

Cet article présente principalement comment utiliser CSS pour créer un triangle compatible avec tous les navigateurs. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il vous sera utile !

Utilisez CSS pour écrire des triangles, compatible avec 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; 
    }

L'effet est le suivant :

Ce qui précède est le résumé de cet article. C'est tout. J'espère que vous l'aimerez tous.

【Tutoriels associés recommandés】

1. Tutoriel vidéo CSS
2 Manuel en ligne CSS
3. tutoriel bootstrap