title: html/css hexagon with image inside
body: <p>Is there a chance to place an image inside a hexagon shape?
  I'm used to <a href="https://stackoverflow.com/questions/3637613/hexagonal-shaped-cells-in-html">hexagonal shaped cells in html</a>, but I could'nt get it filled with an (background?) image.</p>
  
  <p>Here is what I have tried :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hexagon pic"&gt;
    &lt;span class="top" style="background: url(http://placekitten.com/400/400/)"&gt;&lt;/span&gt;
    &lt;span class="middle" style="background: url(http://placekitten.com/400/400/)"&gt;&lt;/span&gt;
    &lt;span class="bottom" style="background: url(http://placekitten.com/400/400/)"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;div class="hexagon"&gt;
    &lt;span class="top" style="overflow: hidden;"&gt;&lt;img src="http://placekitten.com/400/400/" /&gt;&lt;/span&gt;
    &lt;span class="middle" style="overflow: hidden;"&gt;&lt;img src="http://placekitten.com/400/400/" /&gt;&lt;/span&gt;
    &lt;span class="bottom" style="overflow: hidden;"&gt;&lt;img src="http://placekitten.com/400/400/" /&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="hexagon"&gt;
    &lt;span class="top"&gt;&lt;img src="http://placekitten.com/400/400/" /&gt;&lt;/span&gt;
    &lt;span class="middle"&gt;&lt;img src="http://placekitten.com/400/400/" /&gt;&lt;/span&gt;
    &lt;span class="bottom"&gt;&lt;img src="http://placekitten.com/400/400/" /&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is a fiddle: <a href="http://jsfiddle.net/jnz31/kGSCA/" rel="noreferrer">http://jsfiddle.net/jnz31/kGSCA/</a></p>