如何使用 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">

答案：

随着 CSS3 的出现，可能性是无限的，如以下示例所示：

.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="image.jpg" alt="Image">
</div>

在此解决方案中，采用 CSS3 剪切路径来定义六边形形状，允许图像在其中无缝显示。这种方法受到现代浏览器的支持，并提供出色的跨浏览器兼容性，确保一致的用户体验。

以上是如何使用 HTML 和 CSS 在六边形形状中嵌入图像？的详细内容。更多信息请关注PHP中文网其他相关文章！