So machen Sie ein Dreieck mithilfe von CSS mit allen Browsern kompatibel

Dieser Artikel stellt hauptsächlich vor, wie man mit CSS ein Dreieck erstellt, das mit allen Browsern kompatibel ist. Ich hoffe, dass es für Sie hilfreich ist.

Verwenden Sie CSS zum Schreiben von Dreiecken, kompatibel mit 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; 
    }

Der Effekt ist wie folgt:

Das Obige ist die Zusammenfassung dieses Artikels. Das ist alles. Ich hoffe, es gefällt euch allen.

【Empfohlene verwandte Tutorials】

1. CSS-Video-Tutorial
2. CSS-Online-Handbuch
3 Bootstrap-Tutorial