<div class="hexagon">
  <a href="##"></a>
  <div class="corner-1"></div>
  <div class="corner-2"></div>
</div>
.hexagon{
  width: 150px;
  height: 86px;
  position: relative;
  margin: 150px auto;
  background: #ccc   url("https://unsplash.it/300/300/?random") no-repeat center;
  background-size:auto 173px;
  
  a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -2;
    overflow: hidden;
    backface-visibility: hidden;
    
    &:before {
      width: 173px;
      height: 173px;
      content: '';
      position: absolute;
      background: inherit;
      top: 0;
      left: 0;
      z-index: 1;
      backface-visibility: hidden;
    }
  }
  
  .corner-1{
    z-index: -1;
    transform: rotate(60deg);
    
    &:before {
      transform: rotate(-60deg) translate(-87px, 0px);
      transform-origin: 0 0;
    }
  }
  .corner-2 {
    transform: rotate(-60deg);
    
    &:before {
      transform: rotate(60deg) translate(-48px, -11px);
      bottom: 0;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.