如何使用 CSS 疊加建立帶有邊框和填充的六邊形？

使用邊框和填充創建六邊形

六邊形通常透過偽元素使用 CSS 邊框建立。雖然不可能直接用一種顏色填滿六邊形並用另一種顏色勾畫出輪廓，但另一種方法是將多個六邊形相互重疊。

疊加方法

透過疊加六邊形，您無需依賴影像即可達到所需的效果。以下範例示範了此方法：

HTML:

<code class="html"><div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div></code>

CSS:

<code class="css">.hex {
    /* Define shape, size, and colors */
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}

.hex:before, .hex:after {
    /* Create hexagon shape */
    content: "";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}

.hex:before {
    top: -59px;
    border-bottom: 60px solid #6C6;
}

.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}

.hex.inner {
    /* Style inner hexagon */
    background-color: blue;
    transform: scale(.8, .8);
    z-index: 1;
}

.hex.inner:before {
    border-bottom: 60px solid blue;
}

.hex.inner:after {
    border-top: 60px solid blue;
}

.hex.inner2 {
    /* Style innermost hexagon */
    background-color: red;
    transform: scale(.8, .8);
    z-index: 2;
}

.hex.inner2:before {
    border-bottom: 60px solid red;
}

.hex.inner2:after {
    border-top: 60px solid red;
}</code>

此程式碼建立三個重疊的六邊形，每個六邊形具有不同的顏色和z-index價值觀。 Transform:scale() 屬性用於按比例縮小內部元素的尺寸，建立分層效果。

實例

您可以查看實例此技術的介紹：[六邊形邊框和填充範例](https://codepen.io/username/pen/ wveBJp)

以上是如何使用 CSS 疊加建立帶有邊框和填充的六邊形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！