六边形

<svg class="svg" viewbox="0,0,1026,238" width="1026px" height="238px">
    <defs>
    <linearGradient id="orange_red" x1="0%" y1="40%" x2="40%" y2="100%">
    <stop offset="0%" style="stop-color: rgba(236, 246, 255,.9);
    stop-opacity:1"/>
    <stop offset="100%" style="stop-color:rgba(205,225,255,.9);
    stop-opacity:1"/>
    </linearGradient>
    </defs>
    <polygon class="test"
      points="168,168 126,95.25386608210715 42.00000000000002,95.25386608210715 0,168 41.999999999999964,240.74613391789285 126,240.74613391789285" 
           style="fill:url(#orange_red)" />
    
    <polygon class="test"
      points="304,84 262,11.253866082107152 178.00000000000003,11.253866082107152 136,83.99999999999999 177.99999999999997,156.74613391789285 262,156.74613391789285" 
           style="fill:url(#orange_red)" />
    
    <polygon class="test"
      points="440,168 398,95.25386608210715 314,95.25386608210715 272,168 313.99999999999994,240.74613391789285 398,240.74613391789285" 
           style="fill:url(#orange_red)" />
    
    <polygon class="test"
      points="576,84 534,11.253866082107152 450,11.253866082107152 408,83.99999999999999 449.99999999999994,156.74613391789285 534,156.74613391789285" 
           style="fill:url(#orange_red)" />
    
    <polygon class="test"
      points="712,168 670,95.25386608210715 586,95.25386608210715 544,168 586,240.74613391789285 670,240.74613391789285" 
           style="fill:url(#orange_red)" />
    
    <polygon class="test"
      points="848,84 806,11.253866082107152 722,11.253866082107152 680,83.99999999999999 722,156.74613391789285 806,156.74613391789285" 
           style="fill:url(#orange_red)" />
    
    <polygon class="test"
      points="984,168 942,95.25386608210715 858,95.25386608210715 816,168 858,240.74613391789285 942,240.74613391789285 " 
           style="fill:url(#orange_red)" />
  </svg>

六边形值计算方式

/*
* centerX : 六边形中心点 x 坐标
* centerY: 六边形中心点 y 坐标
* 84： 中心点到角的距离
*/
function getData(centerX,centerY) {
  var data = '';
  for (var i = 0 ; i < 6 ; i++) {
    var x =  Math.cos((i * 60)/180 * Math.PI) * 84 + centerX ;
    var y = -Math.sin((i * 60)/180 * Math.PI) *84 + centerY;    
    //console.log(x+","+y); 
    data += x + ',' + y + ' ';
  }
  return data;
}

getData(84 + 136*0, 168)
getData(84 + 136*1, 84)
getData(84 + 136*2, 168)
getData(84 + 136*3, 84)