Как правильно верстаются такие рамки?

Question

[MRcracker]

Как сверстать такую рамку?

Comments

[Ivan Bogatov]

Я эту странную вещь сегодня на фрилансе в заказах видел. Что это вообще? Обычная рамка? Без подставы?

Answer 1

[ElijahTr]

border right + bottom, на крайних ячейках скрывается через отрицательный margin на ширину border при overflow: hidden у родителя. Внутри все селекторами nth-child + before/after перекрывающие border.

Для 3х ячеек в ряду и любого количества рядов:
https://codepen.io/elijah_tr/pen/wmrdMa

Код можно упростить, там для наглядности развернуто.

Answer 2

[Свинка Пеппа]

Можно поиграть с псевдоэлементами, которые будут перекрывать border'a (сами border'a можно сделать с помощью фона контейнера и margin между ячейками, например) и nth-of-type, т.к. белые области симметричны друг другу, но смещены отностительно пересечения ячеек и поэтому ширина псевдоэлементов для каждой n-ой ячейки будет своя..
Можно тупо задать position: relative контейнеру, рамки сверстать самым обычным образом подкрашивая border, а внутрь контейнера поместить пару элеметов c position: absolute и z-index, которые бы играли роль засветки на пересечениях рамок. Очевидно, что для более или менее динамической генерации ячеек этот способ не подходит.
Можно сделать комбинацию из двух этих вариантов.
В общем вопрос "как правильно" сильно зависит от вопроса - "а что это должно быть":)

Answer 3

[Алексей Скляров]

Вам достаточно просто создать псевдоэлемент для каждого ВТОРОГО блока, создаете :after,:before в виде белых квадратиков и накладываете их на соседей (задаете им отрицательные отступы слева/справа/снизу). Вот и все. Ничего сложного в этом нет.