Hexagon with CSS v2

by Julien Roche

HTML

<div class="hexagon"></div>

<svg width="0" height="0">
  <defs>
    <clipPath id="hexagono" clipPathUnits="objectBoundingBox">
      <polygon points=".25 0, .75 0, 1 .5, .75 1, .25 1, 0 .5" />
    </clipPath>
  </defs>
</svg>

CSS

.hexagon {
  width: 300px; 
  height: 300px;
  background-image: url("https://images.unsplash.com/photo-1500395235658-f87dff62cbf3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=caf592fe79ef67c69701deafb3fc17aa&auto=format&fit=crop&w=600&q=80");
  background-position: 50% 50%;
  background-size: cover;
  -webkit-clip-path: url(#hexagono);
  clip-path: url(#hexagono);
  -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}