CSS를 사용하여 테두리가 있는 투명한 삼각형 만들기

CSS로 복잡한 모양을 만드는 것은 어려울 수 있지만 삼각형의 경우 원하는 것을 달성하기 위한 다양한 접근 방식이 있습니다. 효과.

실험해 본 방법 중 하나는 테두리를 활용하는 것입니다. 이 기술은 작동하지만 시각적인 트릭에 의존합니다. 더 우아한 솔루션이 있나요?

예, 그렇습니다! 웹킷 전용 접근 방식에는 유니코드 문자 U 25B6(▲)을 활용하는 것이 포함됩니다. 방법은 다음과 같습니다.

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

▲

이 코드는 텍스트 획 속성을 활용하여 문자의 윤곽을 삼각형으로 표시합니다. 색상 투명도를 통해 내부를 비워 둘 수 있으며 글꼴 크기는 모양의 크기를 제어합니다.

이 솔루션은 웹킷 브라우저에만 적용되지만 다음과 같은 투명 삼각형을 렌더링하는 간결하고 시각적으로 눈에 띄는 방법을 제공합니다. 국경.