Ну тут очевидный вариант) Но что если допустим 30 элементов? Для каждого nth-child() такое себе. Единственное, что нашел, так это сделать через фигуру в виде треугольника и сделать обтекание по ней. Других способов на CSS похоже нет.
Олег Петров, Тогда ничего сложного не вижу, обычная блочная верстка. Почитайте про flexbox и попробуйте сверстать основу - сетку (без стилизации под игру), а потом когда получится, тогда начнете стилизовать
Олег Петров, вы хотите браузерную игру или просто сверстать нечто подобное как на картинке? Если верстать, то собственно открываете самоучитель по HTML/CSS и вперед, если хотите предать интерактивности, то потом начинайте учить JS, а если хотите где-то это все хранить и взаимодействовать между другими игроками например, то изучайте бэкэнд.
Одним ответом тут так просто не объяснишь. Тут много областей задействовано.