CSS에서 테두리가 있는 투명한 삼각형을 만드는 방법은 무엇입니까?

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

CSS의 일반적인 과제 중 하나는 테두리가 있는 모양을 만드는 것입니다. 만들기 까다로울 수 있는 모양 중 하나는 테두리가 보이는 투명한 삼각형입니다.

기존 접근 방식

귀하의 질문에서 언급한 것처럼 일반적인 접근 방식 중 하나는 다음과 같습니다. 테두리를 사용하여 삼각형의 환상 만들기:

.triangle:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: 1px;
  margin-left: 2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

.triangle:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid black;
}

이 방법을 사용하면 원하는 모양을 얻을 수 있지만 테두리가 있는 트릭을 사용하므로 특정 상황에서는 이상적이지 않을 수 있습니다.

WebKit 전용 솔루션

보다 우아한 접근 방식을 위해 ▲ 문자를 활용하는 WebKit 전용 솔루션을 사용할 수 있습니다.

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

이 기술은 -webkit-text-Stroke 속성을 사용하여 문자 주위에 획을 만들어 삼각형 모양을 만듭니다. 색상 속성을 투명으로 설정하여 캐릭터 자체가 보이지 않게 합니다.

위 내용은 CSS에서 테두리가 있는 투명한 삼각형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!