CSS3에서 배경 이미지로 호버링 가능한 삼각형을 만드는 방법은 무엇입니까?

매끄러운 삼각형 모양 링크를 위한 배경 이미지가 포함된 CSS3 삼각형 만들기

소개

대화형 삼각형으로 웹사이트 미적 향상 모양의 링크는 시각적 매력을 높일 수 있습니다. CSS3를 사용하면 이러한 기하학적 모양을 손쉽게 만들고 배경 이미지를 통합하여 깊이와 매력을 더할 수 있습니다.

투명한 호버 영역의 과제

그러나 공통적인 문제가 발생합니다. 삼각형을 생성할 때: 배경 이미지의 투명한 부분 위로 마우스를 가져갈 수 없습니다. 이 장애물로 인해 방문자는 기본 링크에 액세스할 수 없습니다.

해결책: 하위 이미지 활용

이 문제를 극복하려면 배경 이미지 대신 링크에 하위 이미지를 사용하는 것이 좋습니다. . 이 접근 방식을 구현하면 하위 이미지 링크의 정렬을 유지하면서 상위 삼각형 요소를 독립적으로 왜곡할 수 있습니다.

코드 구현

다음은 방법을 보여주는 코드입니다. 이것을 구현 기술:

HTML:

<div>
<p><strong>관련 CSS:</strong></p>
<pre class="brush:php;toolbar:false">.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;
}

결론

링크에 아동 이미지를 사용하고 기울어진 삼각형 요소와 능숙하게 정렬하면 전체 삼각형 모양에 걸쳐 원활한 호버링 기능을 얻을 수 있습니다. 이 기술은 웹사이트의 상호작용성과 시각적 매력을 향상시켜 보다 매력적인 사용자 경험을 제공합니다.