순수 CSS로 삼각형을 그리는 방법

CSS로 삼각형을 그리는 방법: 1. 너비와 높이가 0인 레이블 요소를 정의합니다. 2. "테두리 방향: 테두리 너비 단색 테두리 색상"을 사용하여 삼각형의 밑면을 정의합니다. 나머지 3면에 테두리만 설정하면 됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

삼각형 구현 원리:

• 너비(너비)는 0, 높이(높이)는 0입니다. ) 테두리 방향으로 설정: 길이는 빨간색이며 아래쪽에 그려진 직선입니다. 다른 면에는 테두리 방향을 사용합니다. 길이는 투명합니다.

• 두 개의 수평 및 수직 변(위, 아래, 왼쪽, 오른쪽)에 대한 설정이 있습니다. 빗변이 삼각형의 오른쪽에 있는 경우 위쪽 또는 아래쪽의 직선을 설정하고 대각선을 에 설정합니다. 권리. 빗변이 삼각형의 왼쪽에 있는 경우 위쪽 또는 아래쪽 직선과 왼쪽 대각선을 설정합니다.

• 
  

1. 위로

#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;
}

추천 학습 :

css 동영상 튜토리얼

위 내용은 순수 CSS로 삼각형을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!