創建帶有邊框和輪廓的六邊形
透過偽元素使用邊框製作六邊形形狀時,直接為填充和輪廓加入不同的顏色證明具有挑戰性的。然而,還有一個可行的替代方案:在六邊形內疊加六邊形。
範例:
[圖片:帶有彩色輪廓的六邊形範例]
即時範例:
即時範例:[鏈接到實時六邊形示例]
<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中文網其他相關文章!