title: html/css: how to create a hexagonal image-placeholder
body: <p><a href="https://jsfiddle.net/c0r8eunw/" rel="nofollow noreferrer">This</a> is (almost) what I want to create:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="hexagon1"&gt;
    &lt;div class="hexagon-in1"&gt;
      &lt;div class="hexagon-in2"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.hexagon1 {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
  }
  
  .hexagon-in1 {
      overflow: hidden;
      width: 100%;
      height: 100%;
      -webkit-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
      -o-transform: rotate(-60deg);
      transform: rotate(-60deg);
  }
  
  .hexagon-in2 {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50%;
      background-image: url(http://placekitten.com/240/240);
      visibility: visible;
      -webkit-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
      -o-transform: rotate(-60deg);
      transform: rotate(-60deg);
  }
  </code></pre>
  
  <p>The problem is, that I need a border on the hexagon and if possible I would like to place the picture inside an img-tag. I tried adding the border on either div but I only got a border on top and bottom of the hexagon because of the visibility-hidden or the overflow-hidden attribute.</p>
  
  <p>This is what I've found so far while googling:</p>
  
  <p><a href="http://csshexagon.com/" rel="nofollow noreferrer">http://csshexagon.com/</a></p>
  
  <p><a href="https://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3" rel="nofollow noreferrer">https://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3</a></p>
  
  <p><a href="https://github.com/web-tiki/responsive-grid-of-hexagons" rel="nofollow noreferrer">https://github.com/web-tiki/responsive-grid-of-hexagons</a></p>
  
  <p>I've also found some questions concerning this matter here on Stackoverflow but neither of them explained how exactly you could create a hexagon. Also the hexagons in the examples are all standing on an edge, which is not what I want (as demonstrated in the code). I only need one hexagon and not a grid as well.</p>
  
  <p>When I tried to change the styles of the examples it always ended in a desastrous chaos. This is why I would like to know how to create and to calculate the divs which are used to create a hexagon with border and a picture inside.</p>
  
  <p>Which rate does the width have to the height?</p>
  
  <p>How can I create a border that has the same width on each side?</p>
  
  <p>Where do I have to place the picture as background-image?</p>
  
  <p>How big should the picture be (in percentage to the divs)?</p>
  
  <p>What transformations do you really need to create the hexagon? (I saw an example which used scale, rotate and translate to get a picture inside)</p>
  
  <p>How can the rotation be calculated?</p>
  
  <p>How do I calculate the margin needed?</p>
  
  <p>As I am quite the novice in web-designing can someone explain this as simple as possible? It would suffice if someone can show me according to the example-code above how the numbers are calculated. I know that a hexagon has an inner angle of 120° and that's about it.</p>
  
  <p>Thanks for your help in anticipation. :)</p>
  
  <p><strong><em>EDIT</em></strong></p>
  
  <p>Another page I found about hexagons but only to create the shape and not really putting either an image in it nor having a border around it:</p>
  
  <p><a href="http://jtauber.github.io/articles/css-hexagon.html" rel="nofollow noreferrer">http://jtauber.github.io/articles/css-hexagon.html</a></p>