Страницы

Поиск по вопросам

воскресенье, 2 июня 2019 г.

Адаптивные квадратные скобки посредством HTML и CSS

Как сделать резиновые квадратные скобки средствами HTML и CSS? При этом необходимо, чтобы данный блок был резиновый по ширине и высоте:
Сходу, в голову приходит только вариант с дополнительным вложенным блоком и с использованием псевдо-элементов after и before и с абсолютным позиционирования "миниграниц-изображений".


Ответ

Нашел более красивое, а главное оптимальное, на мой взгляд, и кроссбраузерное решение:
.b-matrix { position: relative; margin: 0 30px 25px 0; padding: 2px 4px; border-left: 2px solid #444; border-right: 2px solid #444; position: relative; display: inline-block; } /*-----border-----*/ .b-matrix_border:before, .b-matrix_border:after, .b-matrix__table_border:before, .b-matrix__table_border:after { position: absolute; display: block; width: 8px; height: 2px; background: #444; content: ''; } .b-matrix_border:before { top: 0; left: 0; } .b-matrix_border:after { top: 0; right: 0; } .b-matrix__table_border:before { bottom: 0; left: 0; } .b-matrix__table_border:after { bottom: 0; right: 0; } /*-----border end-----*/ .matrix-cell { display: block; width: 40px; height: 40px; border: 1px solid #ddd; text-align: center; }


Комментариев нет:

Отправить комментарий