html/css hexagon with image inside

Question

Is there a chance to place an image inside a hexagon shape? I'm used to hexagonal shaped cells in html, but I could'nt get it filled with an (background?) image.

Here is what I have tried :

.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>

here is a fiddle: http://jsfiddle.net/jnz31/kGSCA/

Answer 1

With CSS3 almost everything is possible: http://jsfiddle.net/kizu/bhGn4/

There I used different rotations with overflow: hidden, so you can get a cross-browser (well, modern cross-broser) masks that even can be coverable and clickable on the masked area.