如何使用 CSS 創建帶有背景圖像的六邊形？

有背景圖片的六邊形

使用 CSS 在 HTML 中建立六邊形形狀相對簡單。然而，在該六邊形內添加圖像可能會更具挑戰性。

要實現這種效果，可以透過使用變換和溢出屬性來利用 CSS3 的強大功能。透過使用不同的旋轉值並將溢出設為隱藏，可以建立一個跨瀏覽器蒙版，允許在六邊形形狀內添加圖像。

這裡有一個範例，示範如何建立帶有背景影像的六邊形：

.hexagon-bg {
    width: 100px;
    height: 86.61px;
    margin: auto;
    border-bottom: 20px solid red;
    position: relative;
    overflow: hidden;
}

.hexagon-bg:before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(background-image.png);
    transform: rotate(30deg);
    position: absolute;
}

<div class="hexagon-bg">
</div>

此技術建立一個跨瀏覽器蒙版，允許指定的背景影像出現在六邊形形狀內。需要注意的是，較舊的瀏覽器可能不支援此功能，但 Chrome、Firefox 和 Safari 等現代瀏覽器將如預期呈現效果。

以上是如何使用 CSS 創建帶有背景圖像的六邊形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！