CSS 및 CSS3는 삼각형 요소 그리기를 구현합니다.

이 글은 주로 삼각형 요소를 그리는 CSS와 CSS3의 구현을 소개합니다. 이제는 모든 사람과 공유합니다.

프런트 엔드 페이지에는 때때로 삼각형이 필요합니다. 아이콘 또는 삼각형 스타일. 이제 아이콘 대부분의 삼각형은 글꼴 아이콘을 사용하여 구현되지만 일부 큰 삼각형 모듈은 여전히 ​​프런트 엔드에서 CSS 스타일을 사용하여 그려야 합니다. 다음은 다양한 각도에 대한 삼각형 CSS 스타일 코드를 소개합니다. 모든 사람에게 도움이 될 수 있습니다 help1 : 삼각형 업

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

2 : 삼각형 다운

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

3 : 삼각형 좌파

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

4 : 삼각형-삼각형- 오른쪽

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

5:: 삼각형-topleft

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

6: 삼각형-topright

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

7: 삼각형-bottomleft

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

8: 오른쪽 아래 삼각형 :

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

이번 기사는 여기까지입니다. 모든 내용이 포함되어 있습니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하시기 바랍니다. 관련 권장 사항:

기울기 및 회전 애니메이션 효과를 구현하는 CSS3

위 내용은 CSS 및 CSS3는 삼각형 요소 그리기를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!