交叉点中带有圆圈的 HTML 网格答案

【问题标题】：HTML Grid with circles in intersections交叉点中带有圆圈的 HTML 网格
【发布时间】：2021-01-19 01:23:18
【问题描述】：

我将在 HTML 中实现下面的图像，它是用于井字游戏的。

但我不知道如何为插槽和模具添加圆圈。

棋盘大小是动态的（并不总是 3x3）。

我认为可以使用 ::before 或 ::after 伪元素来完成，但我如何找到交叉点？

更新

我做了这个 (check the code at jsfiddle)。现在我需要在水平和垂直的圆圈之间画线。这里有什么想法吗？

更新 2

我做到了！ (check the code at jsfiddle)。

感谢您的帮助。

【问题讨论】：

既然你知道中心和边，我想你可以使用相对定位的容器和绝对定位的块，CSS calc。
因为它是等距的，我认为你可以使用 (left + n * interval) 来获取以 px 为单位的margin-left 的值并使用position: absolute
@StackSlave 我更新了我的问题并按照你说的做了，现在如何添加行？

标签： html intersection tic-tac-toe

【解决方案1】：

#board { 
            display: flex;
            width: 500px;
            height: 500px;
            background: antiquewhite;
            padding: 100px;
            flex-direction: column;
            justify-content: space-between;
        }
        
        #board > div {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        #board > div > div,
        #board > div > div.white,
        #board > div > div.black {
            height: 10px;
            width: 10px;
            display: block;
            border-radius: 50%;
            background: black;
        }
        
        #board > div > div.white::after {
            content: "";
            height: 100px;
            width: 100px;
            display: block;
            border-radius: 50%;
            top: -50px;
            position: relative;
            left: -50px;
            background: white;

        }
        
        #board > div > div.black::after {
            content: "";
            height: 100px;
            width: 100px;
            display: block;
            border-radius: 50%;
            top: -50px;
            position: relative;
            left: -50px;
            background: black;
        }

<div id="board">
        <div>
            <div class="black"></div>
            <div class="black"></div>
            <div class="white"></div>
        </div>

        <div>
            <div></div>
            <div class="black"></div>
            <div class="black"></div>       
        </div>
        
        <div>
            <div></div>
            <div></div>
            <div class="white"></div>
        </div>      
    </div>

这样的事情怎么样？

【讨论】：

谢谢你的代码，它有一个问题：背景颜色必须在圈内而不是圈外。我用我的解决方案更新了我的问题，但我需要帮助在圆圈之间画线。再次感谢。

【解决方案2】：

我的建议

在 css 中使用 jquery 或 javescript 构建 div 和 attributesborder-radius 来绘制圆

然后，通过left + n * interval 和position: absolute 将margin-left 设置为该div

【讨论】：

你能告诉我代码吗？我已经更新了我的问题并提供了我的代码。谢谢。