Я пытаюсь сделать игру Гомоку. Плата выглядит как обычная сетка, за исключением того, что куски помещаются на пересечениях, а не в пространствах.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;
}
Они делают сетку кнопок, где каждое пространство является кнопка. Однако мне нужно сделать мои пересечения кликабельными, а не пробелами. Я планирую сделать такие кнопки, как , чтобы сделать доску. Синие границы будут невидимыми, и я заставил их четко видеть каждую кнопку. Черный круг в последнем - это часть, играемая на пересечении.
Как добавить эти линии и круги в свои кнопки? Или есть лучший способ сделать это? Благодарю.