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