Pure CSS Hexagon

Pure CSS hexagon

/*<div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>*/
.hexagon {
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
       -o-transform: rotate(120deg);
          transform: rotate(120deg);
  width: 200px;
  height: 400px;
  margin: -80px 0 0 20px;
}
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-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);
       -o-transform: rotate(-60deg);
          transform: rotate(-60deg);
}