CSS에서 반응형 백분율 기반 삼각형을 만드는 방법은 무엇입니까?

CSS: 반응형 백분율 기반 삼각형 생성

CSS를 사용하여 하이퍼링크 요소 아래에 화살표를 생성하는 과정에서 문제가 발생합니다. 픽셀 단위의 테두리 너비는 응답성에 제한이 있습니다. 이 기사에서는 백분율 기반 크기 조정으로 삼각형을 얻기 위해 기울어지고 회전된 의사 요소를 사용하는 솔루션을 보여줍니다.

반응형 삼각형 구현

.btn {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}

.btn:after {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}

".btn" 클래스에서는 고정 너비를 제거하여 삼각형의 크기를 콘텐츠 너비에 맞출 수 있습니다. ".btn:after" 의사 요소는 삼각형 모양을 만들기 위해 절대적으로 배치되고, X 방향으로 회전되고, 배경색이 버튼의 배경색과 일치합니다.

padding-bottom을 활용하여 삼각형의 종횡비를 유지합니다. . 이 접근 방식을 사용하면 삼각형의 반응성을 유지하여 하이퍼링크 내의 텍스트 콘텐츠와 URL에 비례하여 크기가 조정됩니다.

위 내용은 CSS에서 반응형 백분율 기반 삼각형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!