속이 빈 삼각형 실현

배경: 프로젝트 도중 속이 빈 삼각형 효과가 필요한 탭 전환이 있었습니다. 백엔드 엔지니어로서 저는 그것을 어떻게 작성해야 할지 잘 모르겠습니다. 인터넷에서 다른 사람들의 구현 방법을 찾아보니 대부분이 단단한 삼각형이라는 것을 알았습니다. 그러다가 마침내 속이 빈 삼각형을 구현한 것을 발견하고 눈물을 펑펑 흘렸습니다. 구현 효과는 비교적 대략적이지만 아이디어는 여전히 비교적 명확합니다. 이를 통해 배우고 원래 기반에 몇 가지 개선을 적용하여 일부 효과를 추가했습니다.

빈 삼각형 원리: 주로 요소 의사 클래스(:before,:after)를 사용하여 구현됩니다.

렌더링: ps: 색상 변경으로 이동

구현 코드:

빈 삼각형