我想制作一个Gomoku游戏。董事会看起来像一个规则的网格,除了件被放置在十字路口而不是空间。CSS,在按钮上添加线条和形状?
到目前为止,我有这样的tic-tac-toe example从Reactjs教程网格。
从它相关的CSS是:
.board-row:after {
clear: both;
content: "";
display: table;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
他们使按钮,每个空间是按钮的网格。不过,我需要让我的交叉点可点击,而不是空格。我打算制作这样的按钮,例如,以便制作电路板。蓝色边框将不可见,我将它们画成清晰可见的每个按钮。最后一个黑圈是在路口玩的一块。
如何将这些线条和圆圈添加到我的按钮?还是有更好的方法来做到这一点?谢谢。