首页  >  文章  >  web前端  >  如何创建带有彩色边框和轮廓的六边形?

如何创建带有彩色边框和轮廓的六边形?

Barbara Streisand
Barbara Streisand原创
2024-11-01 04:49:02514浏览

How to Create Hexagons with Colored Borders and Outlines?

创建带有边框和轮廓的六边形

通过伪元素使用边框制作六边形形状时,直接为填充和轮廓加入不同的颜色证明具有挑战性的。然而,还有一个可行的替代方案:在六边形内叠加六边形。

示例:

[图片:带有彩色轮廓的六边形示例]

现场示例:

[链接到现场六边形示例]

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn