jquery - 蜂窝边框

Question

我正在尝试向 jQuery hive 插件 ( http://www.jqueryscript.net/layout/jQuery-Plugin-For-Responsive-Hexagon-Grid-Layout-Honeycombs.html ) 添加边框，但我似乎无法让它工作，因为 hive 形状本身的构建方式与 CSS 本身支持的形状不同。当我添加 border-top 和 border-bottom 时，线条按预期显示:

.honeycombs .hex_inner{
    display: block;
    visibility: visible;
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    /* Border */
    border-top: 5px solid #FFF;
    border-bottom: 5px solid #FFF;
}

结果:

但是当我只使用 border 标签本身时，左右属性的工作方式不同，看起来它们出现在 hive 内部而不是外部。

.honeycombs .hex_inner{
    display: block;
    visibility: visible;
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border: 5px solid #FFF;

}

结果:

我在这里做错了什么，有没有办法以另一种方式更轻松地添加白色边框？

Answer 1

在原来的蜂窝后面添加一个更大的白色蜂窝对我来说似乎是最简单的解决方案。

除此之外，您还可以尝试使用 box-shadow。

您也可以考虑为 hive 添加一个 svg 元素。