带有图像的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/