有机会将图像放置在六边形内吗？我已经习惯了html中的六边形形状的单元格，但无法将其填充（背景图像）。
这是我尝试过的：
.top {
height: 0;
width: 0;
display: block;
border: 20px solid red;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: red;
border-left-color: transparent;
}
.middle {
height: 20px;
background: red;
width: 40px;
display: block;
}
.bottom {
height: 0;
width: 0;
display: block;
border: 20px solid red;
border-top-color: red;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
<div class="hexagon pic">
<span class="top" style="background: url(http://placekitten.com/400/400/)"></span>
<span class="middle" style="background: url(http://placekitten.com/400/400/)"></span>
<span class="bottom" style="background: url(http://placekitten.com/400/400/)"></span>
</div>
<div class="hexagon">
<span class="top" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
<span class="middle" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
<span class="bottom" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
</div>
<div class="hexagon">
<span class="top"><img src="http://placekitten.com/400/400/" /></span>
<span class="middle"><img src="http://placekitten.com/400/400/" /></span>
<span class="bottom"><img src="http://placekitten.com/400/400/" /></span>
</div>
这是一个小提琴：http : //jsfiddle.net/jnz31/kGSCA/