由于六邊形在設計中常常用到，所以很多設計師喜歡用CSS制作六邊形。在CSS中，代碼比較復雜和麻煩，而利用JS實現六邊形則變得簡單和方便。下面是使用JS制作六邊形的方法。

<script>
function createHexagon(width, height, color) {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.beginPath();
ctx.moveTo(width/4, 0);
ctx.lineTo(width*3/4, 0);
ctx.lineTo(width, height/2);
ctx.lineTo(width*3/4, height);
ctx.lineTo(width/4, height);
ctx.lineTo(0, height/2);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
let dataURL = canvas.toDataURL('image/png');
let hexagon = document.createElement('div');
hexagon.style.background = 'transparent url('+dataURL+') no-repeat center center';
hexagon.style.width = width+'px';
hexagon.style.height = height+'px';
return hexagon;
}
let myHexagon = createHexagon(100, 100, '#FF0000');
document.body.appendChild(myHexagon);
</script>

在代碼中，createHexagon函數使用Canvas創建六邊形，然后將其轉化為DataURL。之后創建六邊形的div，并將背景設置為DataURL，寬度和高度設置為給定的寬度和高度。最后將創建的六邊形添加到HTML文檔中。