I am looking for help with a web development project where I want to create a CSS and HTML version of the hexagonal chess board shown here. My objective is to reproduce the grid structure of the chessboard while excluding the text that accompanies it.
Currently, I have made some progress with my code but I am facing challenges in completing the task. Here's what I have achieved so far:
.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;
}<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>