创建带有边框和轮廓的六边形
通过伪元素使用边框制作六边形形状时,直接为填充和轮廓加入不同的颜色证明具有挑战性的。然而,还有一个可行的替代方案:在六边形内叠加六边形。
示例:
[图片:带有彩色轮廓的六边形示例]
现场示例:
[链接到现场六边形示例]
HTML:
<code class="html"><div class="hex"> <div class="hex inner"> <div class="hex inner2"></div> </div> </div></code>
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中文网其他相关文章!