백분율 기반 너비를 사용하여 반응형 CSS 삼각형을 어떻게 만들 수 있나요?

백분율 기반 너비를 사용하는 반응형 CSS 삼각형

CSS에서는 위쪽과 위쪽에 서로 다른 너비를 설정하여 테두리를 사용하여 삼각형을 만들 수 있습니다. 하단 테두리. 그러나 링크 너비에 백분율을 사용하는 경우 링크 내용에 따라 화살표의 크기를 동적으로 조정할 수 없습니다.

해결책: 백분율 기반 삼각형

링크의 내용에 맞게 크기를 조정하는 반응형 삼각형을 사용하면 기울어지고 회전된 의사 요소를 사용할 수 있습니다. 변환:

.btn {
  ...
  padding-bottom: 15%;
  ...
}

.btn:after {
  content: "";
  ...
  padding-bottom: 50%;
  ...
  transform: rotate(-30deg) skewX(30deg);
}

설명:

• 의사 요소는 절대적으로 위치하며 배경색은 링크에서 상속됩니다.
• padding-bottom 속성(이 예에서는 15%)은 삼각형의 높이를 링크 높이의 백분율로 설정합니다. 너비.
• 삼각형을 기울이고 회전시키면 원하는 모양이 만들어집니다.
• 음수 Z-인덱스는 삼각형이 링크 콘텐츠 뒤에 있음을 보장합니다.

이점:

• 삼각형의 크기는 다음에 따라 자동으로 조정됩니다. 링크의 너비.
• 삼각형의 가로 세로 비율은 유지됩니다.

위 내용은 백분율 기반 너비를 사용하여 반응형 CSS 삼각형을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!