CSSを使用してすべてのブラウザと互換性のある三角形を作成する方法

この記事では、css を使用してすべてのブラウザに互換性のある三角形を作成する方法を主に紹介します。一定の参考価値があります。興味のある友人は参照してください。お役に立てば幸いです。

css を使用して三角形を記述します。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; 
    }

効果は次のとおりです:

以上が今回の記事です。

【おすすめチュートリアル】

1. cssビデオ チュートリアル
2. css オンライン マニュアル
3. ブートストラップ チュートリアル