백분율을 사용하여 반응형 CSS 삼각형을 만드는 방법은 무엇입니까?

백분율 너비의 반응형 CSS 삼각형

아래 CSS 코드는 요소 바로 아래에 화살표를 생성합니다.

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}

.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}

그러나 이 접근 방식에서는 원하는 화살표 크기를 얻기 위해 링크 너비를 지정해야 합니다. 링크 너비에 따라 크기가 조정되는 반응형 삼각형을 만들려면 다음 코드를 사용하세요.

.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 클래스에서 너비를 제거하세요.

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