Шестиугольник с фоном

.wapper { 
  margin: 10px; 
  padding: 10px; 
  background-color: black; 
} 
 
.hexagon { 
  height: 500px; 
  background: white; 
  background: linear-gradient(135deg, transparent 15px, white 0) top left, 
  linear-gradient(225deg, transparent 15px, white 0) top right, 
  linear-gradient(-45deg, transparent 15px, white 0) bottom right, 
  linear-gradient(45deg, transparent 15px, white 0) bottom left; 
  background-size: 50% 50%; 
  background-repeat: no-repeat; 
}

<div class='wapper'> 
  <div class='hexagon'></div> 
</div>

.hexagon { 
  /* Выравняем содержимое блока поцентру */ 
  display: flex; 
  justify-content: center; 
  align-items: center; 
   
  position: relative; 
   
  /* Зададим нужные параметры блоку */ 
  width: 100px; 
  height: 100px; 
  color: white; 
  text-align: center; 
} 
 
/* Сделаем svg "фоном" */ 
.hexagon svg { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  z-index: -1; 
}

<div class="hexagon"> 
  <!-- Создаём фигуру с фоном --> 
  <svg class="svg" viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;"> 
   
    <!-- Создаём маску для "фона" с помощью координат --> 
    <mask id="mask"> 
      <path fill="white" d="M12,9 6,12 0.5,9 0.5,3 6,0 12,3z"/> 
    </mask> 
     
    <!-- Применяем маску к нужному нам "фону" --> 
    <image mask="url(#mask)" xlink:href="https://images2.popmeh.ru/upload/img_cache/a97/a97da46a204e5b28b95f5645a68cc918_ce_3840x1536x0x399_cropped_1920x768.jpg" height="12" /> 
  </svg> 
   
  <!-- Можно ещё добавить любое содержимое --> 
  Просто космос ._. 
</div>