배경 이미지가 있는 CSS3 삼각형이 클릭 가능한 투명 영역을 처리할 수 있나요?

배경 이미지로 삼각형 모양 만들기

질문:

두 개의 삼각형으로 웹사이트 디자인하기 배경 이미지를 포함하고 클릭 가능한 링크 역할을 하는 요소는 삼각형의 투명한 부분을 만들려고 할 때 어려워집니다. 클릭으로 접근 가능합니다. 배경 이미지가 있는 CSS3 삼각형을 사용하여 이 디자인을 구현할 수 있습니까?

답변:

하위 이미지 사용:

간소화하려면 프로세스를 진행하고 대부분의 브라우저와의 호환성을 유지하는 경우 해결 방법은 배경 이미지 대신 링크에 하위 이미지를 사용하는 것입니다. 이 방법에는 변형 기울기 속성을 사용하여 삼각형 모양을 만들고 기울기를 보정하기 위해 하위 이미지를 오프셋하는 작업이 포함됩니다.

단계:

• 컨테이너 div 만들기 적절한 크기(예: 너비 900픽셀, 높이 600픽셀)를 사용하세요.
• 두 개의 하위 div 추가 삼각형의 경우 변환 원점을 반대쪽 모서리에 절대적으로 배치합니다.
• 삼각형의 높이와 너비(이 예에서는 -55.98deg)를 기준으로 계산된 특정 각도로 각 삼각형을 기울입니다.
• 각 삼각형 내에 하위 이미지를 생성하고 상위 div와 동일한 각도로 회전합니다.
• 컨테이너와 컨테이너 모두에 대해 오버플로 속성을 숨김으로 설정합니다. 삼각형 div.

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
  width: 900px;
  height: 600px;
}

.triangle, .triangle img {
  width: 100%;
  height: 100%;
}

.triangle {
  overflow: hidden;
  position: absolute;
  transform: skewX(-55.98deg);
}

.triangle:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}

.triangle:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}

.triangle img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}