如何用CSS实现六角国际象棋棋盘？已有代码寻求完善

我正在开展一项Web开发项目，计划使用CSS和HTML复刻六角国际象棋棋盘的视觉效果，仅还原棋盘的网格结构，不包含附带文字。目前我已完成部分代码，但在推进任务时遇到了困难，以下是我当前的实现代码：

CSS 代码 #

.board{
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: 1fr;
    overflow: hidden;
    width: 770px;
    height: 770px;
  }
  
.board> .column {
    height: 100%;
    width: 100%;
    grid-template-columns:1fr;
    grid-template-rows: repeat(11, 1fr);
}
.board> .column:nth-child(odd){
    transform: translateY(-35px) translateX(17.5px);
}

.board> .column div {
    width: auto;
    height: 70px;
    aspect-ratio: 1;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }

.board> .column div.field:nth-child(even) {
    background: rebeccapurple;
  }

.board> .column div.field:nth-child(odd) {
    background: wheat;
  }

HTML 代码 #

<div class="board">
        <div class="column">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div class="field"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="column">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="column">
            <div></div>
            <div></div>
            <div></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="column">
            <div></div>
            <div></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div></div>
            <div></div>
        </div>
        <div class="column">
            <div></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div></div>
        </div>
        <div class="column">
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
        </div>
        <div class="column">
            <div></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div></div>
        </div>
        <div class="column">
            <div></div>
            <div></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div></div>
            <div></div>
        </div>
        <div class="column">
            <div></div>
            <div></div>
            <div></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="column">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div class="field"></div>
            <div class="field"></div>
            <div class="field"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="column">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div class="field"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

内容的提问来源于stack exchange，提问作者Delarr