首頁 >web前端 >css教學 >如何創建帶有彩色邊框和輪廓的六邊形?

如何創建帶有彩色邊框和輪廓的六邊形?

Barbara Streisand
Barbara Streisand原創
2024-11-01 04:49:02609瀏覽

How to Create Hexagons with Colored Borders and Outlines?

創建帶有邊框和輪廓的六邊形

透過偽元素使用邊框製作六邊形形狀時,直接為填充和輪廓加入不同的顏色證明具有挑戰性的。然而,還有一個可行的替代方案:在六邊形內疊加六邊形。

範例:

[圖片:帶有彩色輪廓的六邊形範例]

即時範例:

即時範例:

[鏈接到實時六邊形示例]

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

HTML:

CSS:

<code class="css">.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}
.hex:before, .hex:after {
    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;
}</code>

六邊形底座:

<code class="css">.hex.inner {
    background-color: blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    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 {
    background-color: red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index: 2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}</code>

內六邊形:

透過疊加不同顏色的六邊形,這種方法實現了具有彩色邊框和不同填充顏色的六邊形的預期效果。

以上是如何創建帶有彩色邊框和輪廓的六邊形?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn