배경 이미지로 CSS3 삼각형 모양을 만들고 클릭 가능성을 보장하는 방법은 무엇입니까?

배경 이미지가 있는 삼각형 모양

프로젝트에서 링크 역할을 하고 배경 이미지를 유지하려면 두 개의 삼각형이 필요합니다. 문제는 한 삼각형의 투명한 부분 위로 마우스를 가져가서 그 뒤에 있는 링크에 액세스할 수 없다는 것입니다. CSS3 삼각형과 배경 이미지를 사용하여 이 디자인을 구현하는 방법은 다음과 같습니다.

CSS3 삼각형은 테두리만으로는 만들 수 없으며 직사각형 모양만 허용됩니다. 대신 배경 이미지 대신 링크에 하위 이미지를 사용할 수 있습니다. 개선된 코드는 다음과 같습니다.

<div class="pageOption">
  <a href="#" class="option" data-inf="photo">
    <img src="../images/menuPhoto.png">
  </a>
  <a href="#" class="option" data-inf="cinema">
    <img src="../images/menuCinema.png">
  </a>
</div>

삼각형 모양을 담당하는 CSS:

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}
.option img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}

이 솔루션은 왜곡 변환 속성을 활용하여 CSS3 삼각형을 생성합니다. 그런 다음 기울어진 컨테이너를 보정하기 위해 옵션 내부의 이미지가 기울어지지 않습니다. 컨테이너와 옵션 모두에서 오버플로를 숨김으로 설정하면 이미지가 해당 영역의 경계 내에 유지됩니다.

위 내용은 배경 이미지로 CSS3 삼각형 모양을 만들고 클릭 가능성을 보장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!