삼각형 효과를 얻기 위한 CSS

방법 1: 테두리를 사용하여 요소에 높이와 너비가 있습니다.

<i class="triangle"></i>

.triangle {
     transform: rotate(45deg);
     display: block;
     width: 12px;
     height: 12px;
     border: 1px solid #9e9e9e;
     border-top-color: transparent;
     border-right-color: transparent;
     background-color: #fff;
}

효과:

원하는 효과를 얻으려면 변환 속성을 사용하여 삼각형을 회전하세요.

방법 2: 테두리를 사용하여 삼각형 지원

<i class="triangle"></i>

.triangle {
     display: block;
     position: absolute;
     width: 0;
     border-width: 6px;
     border-color: transparent transparent red;
     border-style: dashed dashed solid;
     top: -12px;
     right: 76px;
}

효과:

적용 시나리오: 234를 클릭하거나 해당 옵션을 가리키는 삼각형을 클릭하여 선택

팁:

1. 삼각형을 구현하기 위해 after, before 등 의사 요소를 자주 사용하는 방법을 알아보세요

2. 두 가지 방법의 차이점: 두 번째 방법으로 설정한 삼각형 배경색과 테두리 색상은 동일합니다. 첫 번째 방법으로 설정한 삼각형 배경색과 테두리 색상은 다를 수 있습니다. 다양한 응용 시나리오의 효과에 따라 결정됩니다. 방법을 선택하세요.

두 번째 방법도 색상이 다른 두 개의 삼각형 커버를 사용하여 배경색과 테두리 색상의 다양한 효과를 얻을 수도 있습니다.