CSS3를 사용하여 배경 이미지로 삼각형 모양을 만드는 방법은 무엇입니까?

배경 이미지가 있는 삼각형 모양: CSS3 접근 방식

링크 역할을 하는 배경 이미지가 있는 두 개의 삼각형을 만드는 목표는 CSS3를 사용하여 달성할 수 있습니다. 삼각형. 처음에는 사용자 정의 모양에 테두리 색상이 있는 테두리가 필요하다고 가정했지만 다른 접근 방식이 가능합니다.

하위 이미지를 사용한 솔루션

배경 이미지에 의존하는 대신 하위 이미지 사용을 고려하세요. 삼각형에 대한 이미지입니다. 이 기술에는 다양한 변환 원점을 사용하여 .option 요소를 기울이는 작업이 포함됩니다. 최종 결과에서 눈에 띄는 기울어짐을 방지하려면 하위 이미지를 풀고 .pageOption 및 .option 요소 모두에 Overflow: Hidden을 적용합니다. 이 접근 방식은 IE8/7 및 Opera Mini를 제외한 광범위한 브라우저 호환성을 제공합니다.

HTML 구조

<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;
  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;
}

이 CSS 구성은 하위 이미지의 기울어짐을 풀면서 삼각형을 효과적으로 기울게 하여 투명 영역에 호버 기능이 있는 원하는 삼각형 모양을 얻습니다. 삼각형 위치와 변환 원점을 조정하여 다양한 삼각형 크기와 방향을 얻을 수 있습니다.

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