如何使用 CSS 建立帶有邊框的六邊形形狀？

有邊框和輪廓的六邊形

使用 CSS 偽元素創建六邊形是一項成熟的技術。然而，直接添加不同顏色的邊框可能具有挑戰性。本文探討了實現所需效果的替代方法。

透過疊加多個不同大小和顏色的六邊形，可以在保持所需顏色填充的同時創建帶邊框六邊形的錯覺。

範例實作

HTML:

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

CSS:

.hex {
    ...  /* Hexagon shape and basic styles */
}

.hex inner {
    background-color: blue;
    ...  /* Transform and scaling */
}

.hex inner2 {
    background-color: red;
    ...  /* Transform and scaling */
}

CSS:

CSS:

CSS:

CSS:

工作原理：最外面的.hex 元素定義了基礎六邊形的形狀和顏色。在其中加入了兩個嵌套的 .hex 元素，每個元素都有不同的背景顏色。使用transform:scale()按比例縮放這些內部元素會縮小它們，同時保持六邊形形狀。結果是不同顏色的六邊形的疊加，形成有邊框六邊形的外觀。 即時範例：[六邊形範例](https://www. example.com/hexagon-example/)替代方案：如果影像不是選項，其他替代技術包括SVG、Canvas 或使用CSS mask 屬性.

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