帶邊框和填充的六邊形
以下程式碼建立一個具有純色背景和透明邊框的六邊形:
.hex:before { content: " "; width: 0; height: 0; border-bottom: 30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid transparent; position: absolute; top: -30px; } .hex { margin-top: 30px; width: 104px; height: 60px; background-color: #6C6; position: relative; } .hex:after { content: ""; width: 0; position: absolute; bottom: -30px; border-top: 30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid transparent; }
要實現具有不同顏色的填滿和輪廓的六邊形,需要不同的方法。這是使用分層六邊形的另一種方法:
<code class="html"><div class="hex"> <div class="hex inner"> <div class="hex inner2"></div> </div> </div></code>
<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; } .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>
此方法創建三層六邊形,尺寸逐漸減小且顏色不同,呈現出帶有輪廓的填充六邊形的外觀。
以上是如何使用 CSS 建立一個具有不同顏色填滿和輪廓的六邊形?的詳細內容。更多資訊請關注PHP中文網其他相關文章!