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 クリッピング パスを使用して、六角形の形状で、その中に画像をシームレスに表示できます。このアプローチは最新のブラウザーでサポートされており、ブラウザー間の優れた互換性を提供し、一貫したユーザー エクスペリエンスを保証します。