带有图像的html / css六角形

Question

有机会将图像放置在六边形内吗？我已经习惯了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/