html设置图片显示为六角形,带有图像的html / css六角形

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

}

这是一个小提琴：http : //jsfiddle.net/jnz31/kGSCA/