Как сделать резиновые квадратные скобки средствами 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;
}
Комментариев нет:
Отправить комментарий