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. 부트스트랩 튜토리얼