HTML과 CSS를 사용하여 육각형 내부에 이미지를 표시할 수 있나요?

이미지가 들어간 육각형

질문

HTML/CSS에서 육각형 안에 이미지를 표시하는 것이 가능한가요?

제안된 솔루션

이를 달성하기 위한 한 가지 접근 방식은 CSS3 변환을 사용하여 클리핑 마스크를 구현하는 것입니다.

구현

먼저 다음 CSS 클래스를 사용하여 육각형의 모양을 정의합니다.

.hexagon {
  --base: 20px;
  --height: calc(var(--base) * sqrt(3) / 2);

  position: relative;
  width: var(--base) * 2;
  height: var(--height) * 2;
}

그런 다음 오버플로 숨김 및 CSS 변환을 활용하여 육각형 마스크를 만들고 그 안에 이미지를 배치합니다.

.hexagon > img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  clip-path: polygon(
    0 0,
    calc(100% - var(--base)) 0,
    100% calc(var(--height) * 0.5),
    100% calc(var(--height) * 1.5),
    calc(100% - var(--base)) 100%,
    0 100%
  );
}

다음은 예제 코드입니다.

<div class="hexagon">
  <img src="image.jpg" alt="Image inside hexagon" />
</div>

고려사항

이 솔루션은 브라우저 간 호환성과 클릭 가능한 마스크 영역을 모두 제공합니다. CSS3 변환을 활용하면 직사각형이 아닌 모양을 유연하게 작업할 수 있습니다.

위 내용은 HTML과 CSS를 사용하여 육각형 내부에 이미지를 표시할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!