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

CSS를 사용하여 배경 이미지로 삼각형 이미지 만들기

이 프로젝트에서는 링크 역할을 하는 배경 이미지로 두 개의 삼각형 이미지를 만드는 것을 목표로 합니다. 디자인 모형은 이러한 삼각형을 특정 배열로 보여줍니다.

[배경 이미지가 있는 삼각형 이미지 이미지]

처음에는 div를 사용하고 여기에 배경 이미지를 적용하려고 시도했습니다. 그러나 이 접근 방식은 기본 링크에 도달하기 위해 이미지의 투명한 부분 위로 마우스를 가져가는 데 어려움을 겪었습니다.

배경 이미지가 포함된 CSS3 삼각형: 실행 가능한 솔루션

예, 가능합니다. CSS3 삼각형을 사용하여 이 디자인을 만들고 배경 이미지를 설정합니다. 사용자 정의 모양은 실제로 지정된 테두리 색상이 있는 테두리를 사용하여 생성됩니다.

배경 이미지가 있는 CSS3 삼각형에 대한 코드 구현

다음은 CSS를 사용하여 배경 이미지와 함께 삼각형 이미지를 구현하는 데 필요한 코드입니다. :

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}

.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}

.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}

하위 이미지 및 기울이기 변환을 사용하는 대체 접근 방식

대체 접근 방식은 링크에 배경 이미지 대신 하위 이미지를 사용하는 것입니다. 여기에는 다양한 변환 원점으로 .option 요소를 기울이고, 하위 이미지를 기울이고, .pageOption 및 .option 요소 모두에 Overflow: Hidden을 설정하는 작업이 포함됩니다.

HTML:

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

이 접근 방식은 IE8/7 및 Opera Mini를 제외한 다양한 브라우저에서 향상된 지원을 제공하는 더욱 깔끔한 솔루션을 제공합니다.

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