CSS 의사 요소 삼각형의 모양이 잘못된 이유는 무엇입니까?

의사 요소를 사용하여 HTML/CSS 삼각형 만들기

의사 요소를 사용하여 삼각형 모양을 만들려고 하면 잘못된 출력이 발생합니다. 원하는 모양이 아닌 원하지 않는 모양이 보입니다.

이 문제를 해결하려면 테두리 사용과 관련된 근본 원인을 이해하는 것이 중요합니다. CSS 삼각형의 작동 방식에 대해 제공된 링크를 참조하면 테두리 동작과 출력에 미치는 영향에 대해 더 깊이 이해할 수 있습니다.

삼각형을 효과적으로 생성하는 대체 솔루션에는 회전과 테두리를 사용하는 것이 포함됩니다. 방법은 다음과 같습니다.

.box {
  border: 1px solid;
  margin: 50px;
  height: 50px;
  position: relative;
  background: #f2f2f5;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid;
  border-left: 1px solid;
  top: -11px;
  left: 13px;
  background: #f2f2f5;
  transform: rotate(45deg);
}

<div class="box"></div>

이 접근 방식은 회전된 의사 요소와 테두리를 결합하여 원하는 삼각형 모양을 생성합니다. 지정된 회전 각도에 따라 삼각형의 방향이 결정됩니다.

위 내용은 CSS 의사 요소 삼각형의 모양이 잘못된 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!