我可以使用 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中文网其他相关文章！