HTML과 CSS를 사용하여 육각형 모양 내에 이미지를 어떻게 삽입할 수 있나요?

HTML/CSS에서 육각형 모양에 이미지 삽입

질문:

가능합니까? 육각형 안에 이미지를 삽입하려면? HTML의 육각형 셀은 익숙하지만 배경 이미지로 채우는 것은 어려운 일이었습니다.

시도한 노력:

다음은 몇 가지 접근 방식입니다. 시도됨:

.top {
  height: 0;
  width: 0;
  display: block;
  border: 20px solid red;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: red;
  border-left-color: transparent;
}
.middle {
  height: 20px;
  background: red;
  width: 40px;
  display: block;
}
.bottom {
  height: 0;
  width: 0;
  display: block;
  border: 20px solid red;
  border-top-color: red;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

<div class="hexagon pic">
  <span class="top"><p><strong>답변:</strong></p>
<p>다음 예에서 볼 수 있듯이 CSS3의 출현으로 가능성은 무한해졌습니다.</p>
<pre class="brush:php;toolbar:false">.hexagon {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

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

<div class="hexagon">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Image">
</div>

이 솔루션에서는 CSS3 클리핑 경로를 사용하여 육각형 모양을 정의합니다. 그 안에 이미지가 원활하게 표시됩니다. 이 접근 방식은 최신 브라우저에서 지원되며 뛰어난 브라우저 간 호환성을 제공하여 일관된 사용자 경험을 보장합니다.