首页 / 技术问答 / Html问答列表 / 问答详情

Html 如何使用css创建六边形棋盘

我正在寻求一个网络开发项目的帮助，在那里我的目标是重新创建this hexagonal chess board使用CSS和HTML的视觉表示.我的目标是复制棋盘的网格 struct ，而不包括附带的文本.

到目前为止，我的代码已经取得了一些进展，但我在完成任务时遇到了困难.以下是我到目前为止所取得的成就:

.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 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 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>

推荐答案

有几种方法可以实现您想要使用HTML和CSS执行的操作.它不是很优雅，但它应该能用.

我找到了display-flex英镑的解决方案.这种方法的一个优点是，您没有空单元格，并且它们在代码中的顺序是正确的.

    #board {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        height: 40em;
    }
    
    .col {
        display: flex;
        flex-direction: column-reverse;
        width: 50px;
        margin: 14.5px;
    }
    
    .cell {
        position: relative;
        width: 50px;
        height: 86.603px;
        margin: 2px;
        background-color: red;
        text-align: center;
        line-height: 86.603px;
    }
    
    .cell::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: -25px;
        border-right: 25px solid red;
        border-top: 43.302px solid transparent;
        border-bottom: 43.302px solid transparent;
        border-left: 0px solid transparent;
    }
    
    .cell::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: 50px;
        border-left: 25px solid red;
        border-top: 43.302px solid transparent;
        border-bottom: 43.302px solid transparent;
        border-right: 0px solid transparent;
    }
    
    .col:nth-child(5),
    .col:nth-child(7) {
        margin-top: 43.302px;
    }
    
    .col:nth-child(4),
    .col:nth-child(8) {
        margin-top: 86.603px;
    }
    
    .col:nth-child(3),
    .col:nth-child(9) {
        margin-top: 129.904px;
    }

    .col:nth-child(2),
    .col:nth-child(10) {
        margin-top: 173.206px;
    }
    
    .col:nth-child(1),
    .col:nth-child(11) {
        margin-top: 216.507px;  
    }
    
    .col:nth-child(6) {
        margin-top: 0;
    }
    
    .col:nth-last-child(3n + 6) .cell:nth-child(3n),
    .col:nth-last-child(3n + 7) .cell:nth-child(3n + 1),
    .col:nth-last-child(3n + 8) .cell:nth-child(3n + 2) {
        background-color: blue;
    }
    
    .col:nth-last-child(3n + 6) .cell:nth-child(3n)::before,
    .col:nth-last-child(3n + 7) .cell:nth-child(3n + 1)::before,
    .col:nth-last-child(3n + 8) .cell:nth-child(3n + 2)::before {
        border-right-color: blue;
    }

    .col:nth-last-child(3n + 6) .cell:nth-child(3n)::after,
    .col:nth-last-child(3n + 7) .cell:nth-child(3n + 1)::after,
    .col:nth-last-child(3n + 8) .cell:nth-child(3n + 2)::after {
        border-left-color: blue;
    }

    .col:nth-last-child(3n + 6) .cell:nth-child(3n + 1),
    .col:nth-last-child(3n + 7) .cell:nth-child(3n + 2),
    .col:nth-last-child(3n + 8) .cell:nth-child(3n) {
        background-color: yellow;
    }
    
    .col:nth-last-child(3n + 6) .cell:nth-child(3n + 1)::before,
    .col:nth-last-child(3n + 7) .cell:nth-child(3n + 2)::before,
    .col:nth-last-child(3n + 8) .cell:nth-child(3n)::before {
        border-right-color: yellow;
    }
    
    .col:nth-last-child(3n + 6) .cell:nth-child(3n + 1)::after,
    .col:nth-last-child(3n + 7) .cell:nth-child(3n + 2)::after,
    .col:nth-last-child(3n + 8) .cell:nth-child(3n)::after {
        border-left-color: yellow;
    }
    
    .col:nth-last-child(3n + 6) .cell:nth-child(3n + 2),
    .col:nth-last-child(3n + 7) .cell:nth-child(3n),
    .col:nth-last-child(3n + 8) .cell:nth-child(3n + 1) {
        background-color: green;
    }
    
    .col:nth-last-child(3n + 6) .cell:nth-child(3n + 2)::before,
    .col:nth-last-child(3n + 7) .cell:nth-child(3n)::before,
    .col:nth-last-child(3n + 8) .cell:nth-child(3n + 1)::before {
        border-right-color: green;
    }
    
    .col:nth-last-child(3n + 6) .cell:nth-child(3n + 2)::after,
    .col:nth-last-child(3n + 7) .cell:nth-child(3n)::after,
    .col:nth-last-child(3n + 8) .cell:nth-child(3n + 1)::after {
        border-left-color: green;
    }
    
    .col:nth-child(3n + 6) .cell:nth-child(3n),
    .col:nth-child(3n + 7) .cell:nth-child(3n + 1),
    .col:nth-child(3n + 8) .cell:nth-child(3n + 2) {
        background-color: blue;
    }
    
    .col:nth-child(3n + 6) .cell:nth-child(3n)::before,
    .col:nth-child(3n + 7) .cell:nth-child(3n + 1)::before,
    .col:nth-child(3n + 8) .cell:nth-child(3n + 2)::before {
        border-right-color: blue;
    }
    
    .col:nth-child(3n + 6) .cell:nth-child(3n)::after,
    .col:nth-child(3n + 7) .cell:nth-child(3n + 1)::after,
    .col:nth-child(3n + 8) .cell:nth-child(3n + 2)::after {
        border-left-color: blue;
    }
    
    .col:nth-child(3n + 6) .cell:nth-child(3n + 1),
    .col:nth-child(3n + 7) .cell:nth-child(3n + 2),
    .col:nth-child(3n + 8) .cell:nth-child(3n) {
        background-color: yellow;
    }
    
    .col:nth-child(3n + 6) .cell:nth-child(3n + 1)::before,
    .col:nth-child(3n + 7) .cell:nth-child(3n + 2)::before,
    .col:nth-child(3n + 8) .cell:nth-child(3n)::before {
        border-right-color: yellow;
    }
    
    .col:nth-child(3n + 6) .cell:nth-child(3n + 1)::after,
    .col:nth-child(3n + 7) .cell:nth-child(3n + 2)::after,
    .col:nth-child(3n + 8) .cell:nth-child(3n)::after {
        border-left-color: yellow;
    }
    
    .col:nth-child(3n + 6) .cell:nth-child(3n + 2),
    .col:nth-child(3n + 7) .cell:nth-child(3n),
    .col:nth-child(3n + 8) .cell:nth-child(3n + 1) {
        background-color: green;
    }

    .col:nth-child(3n + 6) .cell:nth-child(3n + 2)::before,
    .col:nth-child(3n + 7) .cell:nth-child(3n)::before,
    .col:nth-child(3n + 8) .cell:nth-child(3n + 1)::before {
        border-right-color: green;
    }

    .col:nth-child(3n + 6) .cell:nth-child(3n + 2)::after,
    .col:nth-child(3n + 7) .cell:nth-child(3n)::after,
    .col:nth-child(3n + 8) .cell:nth-child(3n + 1)::after {
        border-left-color: green;
    }
<div id="board">
        <div id="col-A" class="col">
            <div id="a-1" class="cell">a-1</div>
            <div id="a-2" class="cell">a-2</div>
            <div id="a-3" class="cell">a-3</div>
            <div id="a-4" class="cell">a-4</div>
            <div id="a-5" class="cell">a-5</div>
            <div id="a-6" class="cell">a-6</div>
        </div>
        <div id="col-B" class="col">
            <div id="2-1" class="cell">b-1</div>
            <div id="b-2" class="cell">b-2</div>
            <div id="b-3" class="cell">b-3</div>
            <div id="b-4" class="cell">b-4</div>
            <div id="b-5" class="cell">b-5</div>
            <div id="b-6" class="cell">b-6</div>
            <div id="b-7" class="cell">b-7</div>
        </div>
        <div id="col-C" class="col">
            <div id="c-1" class="cell">c-1</div>
            <div id="c-2" class="cell">c-2</div>
            <div id="c-3" class="cell">c-3</div>
            <div id="c-4" class="cell">c-4</div>
            <div id="c-5" class="cell">c-5</div>
            <div id="c-6" class="cell">c-6</div>
            <div id="c-7" class="cell">c-7</div>
            <div id="c-8" class="cell">c-8</div>
        </div>
        <div id="col-D" class="col">
            <div id="d-1" class="cell">d-1</div>
            <div id="d-2" class="cell">d-2</div>
            <div id="d-3" class="cell">d-3</div>
            <div id="d-4" class="cell">d-4</div>
            <div id="d-5" class="cell">d-5</div>
            <div id="d-6" class="cell">d-6</div>
            <div id="d-7" class="cell">d-7</div>
            <div id="d-8" class="cell">d-8</div>
            <div id="d-9" class="cell">d-9</div>
        </div>
        <div id="col-E" class="col">
            <div id="e-1" class="cell">e-1</div>
            <div id="e-2" class="cell">e-2</div>
            <div id="e-3" class="cell">e-3</div>
            <div id="e-4" class="cell">e-4</div>
            <div id="e-5" class="cell">e-5</div>
            <div id="e-6" class="cell">e-6</div>
            <div id="e-7" class="cell">e-7</div>
            <div id="e-8" class="cell">e-8</div>
            <div id="e-9" class="cell">e-9</div>
            <div id="e-10" class="cell">e-10</div>
        </div>
        <div id="col-F" class="col">
            <div id="f-1" class="cell">f-1</div>
            <div id="f-2" class="cell">f-2</div>
            <div id="f-3" class="cell">f-3</div>
            <div id="f-4" class="cell">f-4</div>
            <div id="f-5" class="cell">f-5</div>
            <div id="f-6" class="cell">f-6</div>
            <div id="f-7" class="cell">f-7</div>
            <div id="f-8" class="cell">f-8</div>
            <div id="f-9" class="cell">f-9</div>
            <div id="f-10" class="cell">f-10</div>
            <div id="f-11" class="cell">f-11</div>
        </div>
        <div id="col-G" class="col">
            <div id="g-1" class="cell">g-1</div>
            <div id="g-2" class="cell">g-2</div>
            <div id="g-3" class="cell">g-3</div>
            <div id="g-4" class="cell">g-4</div>
            <div id="g-5" class="cell">g-5</div>
            <div id="g-6" class="cell">g-6</div>
            <div id="g-7" class="cell">g-7</div>
            <div id="g-8" class="cell">g-8</div>
            <div id="g-9" class="cell">g-9</div>
            <div id="g-10" class="cell">g-10</div>
        </div>
        <div id="col-H" class="col">
            <div id="h-1" class="cell">h-1</div>
            <div id="h-2" class="cell">h-2</div>
            <div id="h-3" class="cell">h-3</div>
            <div id="h-4" class="cell">h-4</div>
            <div id="h-5" class="cell">h-5</div>
            <div id="h-6" class="cell">h-6</div>
            <div id="h-7" class="cell">h-7</div>
            <div id="h-8" class="cell">h-8</div>
            <div id="h-9" class="cell">h-9</div>
        </div>
        <div id="col-I" class="col">
            <div id="i-1" class="cell">i-1</div>
            <div id="i-2" class="cell">i-2</div>
            <div id="i-3" class="cell">i-3</div>
            <div id="i-4" class="cell">i-4</div>
            <div id="i-5" class="cell">i-5</div>
            <div id="i-6" class="cell">i-6</div>
            <div id="i-7" class="cell">i-7</div>
            <div id="i-8" class="cell">i-8</div>
        </div>
        <div id="col-K" class="col">
            <div id="k-1" class="cell">k-1</div>
            <div id="k-2" class="cell">k-2</div>
            <div id="k-3" class="cell">k-3</div>
            <div id="k-4" class="cell">k-4</div>
            <div id="k-5" class="cell">k-5</div>
            <div id="k-6" class="cell">k-6</div>
            <div id="k-7" class="cell">k-7</div>
        </div>
        <div id="col-L" class="col">
            <div id="l-1" class="cell">l-1</div>
            <div id="l-2" class="cell">l-2</div>
            <div id="l-3" class="cell">l-3</div>
            <div id="l-4" class="cell">l-4</div>
            <div id="l-5" class="cell">l-5</div>
            <div id="l-6" class="cell">l-6</div>
        </div>
    </div>

Html相关问答推荐

在Apps Script中连接CSS与HTML

每次在视口中运行动画

如何使我的组织 struct 图的连接线响应？

HTML表行悬停仅适用于偶数行

如何防止可见的滑动抽屉，同时转移HTML方向？

更改Angular 为17的material Select 字段的高度？

旧文本淡出，但新文本不会淡入，而是突然出现

禁用所有行，但在16角中单击编辑按钮的行除外

列表项文本在占据剩余空间之前在标记下换行

Angular MatBadge 在高于 99 时不显示完整数字

如何保持块扩展以填充视口？

使用简单的 HTML 设计公司徽标和文本

如何在 css 和 html 中创建花状 struct

修复 Vue 3 Component 中的 CSS 以显示后面的 Select 器样式而无需 ！important

把标题、段落和图片放在一起

从右到左支持百分号

如何使用 css 将图像变成黑色并使文本出现在悬停时？

我正在使用 react-router-dom 并创建了一个固定的导航栏，它在每个网页上不断改变大小，我不知道为什么

我的卡片内容无法在 bootstrap 5 中正确居中

在 EJS 中将元素放置在彼此下方的列中

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630