개요

border를 사용하여 삼각형을 만드는 방법은 다음과 같은 대화상자를 만들 수 있기 때문에 기록합니다.

테두리로 삼각형을 만드는 방법

border는 너비가 있는 요소로 삼각형을 만들 수 있습니다.
전체 코드는 다음과 같다.

1단계: 빈 요소 설정

너비와 높이가 0인 빈 상자 요소를 설정합니다.
요소 주위에 테두리로 테두리를 설정합니다.

2단계: 테두리로 사각형 만들기

왜냐하면 border 자체가 넓이가 있어요.
아래와 같이 border의 요소를 높이, 너비 모두 0으로 설정할 때
에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.
(코드)
.test{
display: block;
width:0px;
height:0;
border-top: solid 50px red;
border-right: solid 50px blue;
　}
(생성된 사각형)

top를 빨간색으로 설정하고right를 파란색으로 설정하면border의 경계선이 기울어집니다.이렇게 기울어진 경계선을 적용하여 삼각형을 생성합니다.

3단계: 삼각형 사변 부분의 테두리 색상을 투명하게 만들기

2단계에서 왼쪽 테두리를 넣어 사각형을 만듭니다.
이때 border의 너비가 생성된 삼각형의 높이를 설정합니다.

그런 다음 나머지 부분 (삼각형 사변의 왼쪽 테두리 및 오른쪽 테두리 생성) 의 색상을 투명하게 설정합니다.

블루를transparent로 설정하면 투명하게 할 수 있습니다.
이렇게 하면 삼각형을 만들 수 있다.

세부 정보 색인 만들기

삼각형을 다른 상자 요소와 중첩하여 세부 색인과 유사한 모양을 만들 수 있습니다.

1단계: 적절한 상자 요소 준비

대화 상자 요소를 준비합니다.

단계 2: 준비된 상자 요소의 위치 설정: 반복

삼각형을 1단계에서 생성한 사각형과 중첩시키기 위해 위치를 설정합니다: 재배치.

3단계: 동일한 색상의 삼각형 생성하기

대화상자 요소 색상과 동일한 삼각형을 생성합니다.
(앞에서 말한 바와 같이border로 제작)

단계 4: 위치를 삼각형으로 설정

사용 위치: absolute 상세도 인덱스의 크기와 위치를 조정합니다.

대화 상자가 완료됩니다.