Как сверстать шестиугольник?

header, footer { 
  height: 5em; 
} 
 
header { 
  background: silver; 
} 
 
div { 
  width: 10em; 
  margin: auto; 
  position: absolute; 
  left: 0; 
  right: 0; 
  transform: translateY(-50%); 
   
  --d: 16.5%; /* не знаю, как посчитать, подогнал */ 
  background: 
    linear-gradient(120deg, silver var(--d), transparent var(--d), transparent calc(100% - var(--d)), white calc(100% - var(--d))), 
    linear-gradient(2400deg, silver var(--d), transparent var(--d), transparent calc(100% - var(--d)), white calc(100% - var(--d))), 
    orange; 
 
  /* избавляемся от артефактов сверху и снузу */ 
  border: 1px solid transparent; 
  background-clip: content-box; 
} 
 
div:before { 
  content: ""; 
  display: block; 
  padding-top: 86.6%; /* sqrt(3)/2 */ 
}

<header>header</header> 
<div></div> 
<footer>footer</footer>

function draw(){ 
  let canvas = document.getElementById('canvas'); 
  let ctx = canvas.getContext('2d'); 
  ctx.beginPath(); 
  ctx.moveTo(100,0); 
  ctx.lineTo(300,0); 
  ctx.lineTo(400,200); 
  ctx.lineTo(300,400); 
  ctx.lineTo(100,400); 
  ctx.lineTo(0,200); 
  ctx.fillStyle = 'orange'; 
  ctx.fill(); 
} 
draw();

<canvas id="canvas" width="400" height="400"></canvas>