如何使用 CSS 叠加创建带边框和填充的六边形？

使用边框和填充创建六边形

六边形通常通过伪元素使用 CSS 边框创建。虽然不可能直接用一种颜色填充六边形并用另一种颜色勾画出轮廓，但另一种方法是将多个六边形相互重叠。

叠加方法

通过叠加六边形，您无需依赖图像即可达到所需的效果。以下示例演示了此方法：

HTML:

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

CSS:

<code class="css">.hex {
    /* Define shape, size, and colors */
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}

.hex:before, .hex:after {
    /* Create hexagon shape */
    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 {
    /* Style inner hexagon */
    background-color: blue;
    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 {
    /* Style innermost hexagon */
    background-color: red;
    transform: scale(.8, .8);
    z-index: 2;
}

.hex.inner2:before {
    border-bottom: 60px solid red;
}

.hex.inner2:after {
    border-top: 60px solid red;
}</code>

此代码创建三个重叠的六边形，每个六边形具有不同的颜色和 z-index价值观。 Transform:scale() 属性用于按比例减小内部元素的尺寸，创建分层效果。

实例

您可以查看实例此技术的介绍：[六边形边框和填充示例](https://codepen.io/username/pen/wveBJp)

以上是如何使用 CSS 叠加创建带边框和填充的六边形？的详细内容。更多信息请关注PHP中文网其他相关文章！