将背景图像放在 CSS 六边形中？ [复制]答案

【问题标题】：Putting a background image in a CSS hexagon? [duplicate]将背景图像放在 CSS 六边形中？ [复制]
【发布时间】：2014-09-11 12:47:17
【问题描述】：

http://codepen.io/anon/pen/dqEbA

我希望能够用图像背景替换一些绿色背景...这可以通过我现在使用的 CSS 实现，还是我必须使用替代 CSS 布局才能实现？

以下是 CSS 供参考：

.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -26px;
}
.hex .top {
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex .middle {
    width: 104px;
    height: 60px;
    background: #6C6;

}
.hex .bottom {
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex-row {
    clear: left;
}
.hex-row.even {
    margin-left: 53px;
}

还有一个 HTML 的 sn-p：

<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"</div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>

【问题讨论】：

@KheemaPandey 我不这么认为
问题表明OP有同样的问题。

标签： html css

【解决方案1】：

我想是的，我会使用:nth-child()。例如，如果每三个六边形需要一张背景图片，但它们需要相同的图片：

.hex:nth-child(3n) {background-image: url('third.png');}

虽然您可以手动选择需要更改背景的：

.hex:nth-child(19) {background-image: url('bg19.png');}    
.hex:nth-child(26) {background-image: url('bg26.png');}

等等。

【讨论】：

【解决方案2】：

HTML

<div class="hex "><div class="bbc "></div><div class="middle abc"></div><div class="bbb "></div></div>

CSS

.hex .abc
 {
    background:red;

 }
 .bbc
 {
    border-bottom: 30px solid red;
    width: 0;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
 }

 .bbb
 {
    width: 0;
    border-top: 30px solid red;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
 }

进行这些更改并尝试

【讨论】：