div.matrix-brace {
box-sizing: border-box;
background-color: #444;
width: fit-content;
font-size: 3em;
padding: 0.5em;
font-family: monospace;
& > div {
--border-value: 1px solid #28CDC1;
box-sizing: border-box;
line-height: 0.5em;
padding: 0.5em;
width: fit-content;
position: relative;
background-color: #222;
&:not(:first-of-type):not(:last-of-type) {
border-left: var(--border-value);
border-right: var(--border-value);
}
&:first-of-type,
&:last-of-type {
&:before,
&:after {
content: "";
display: block;
position: absolute;
top: 0;
width: 0.5em;
height: 100%;
}
}
&:first-of-type {
&:before,
&:after {
border-top: var(--border-value);
}
&:before {
left: 0;
border-left: var(--border-value);
}
&:after {
right: -2px;
border-right: var(--border-value);
}
}
&:last-of-type {
&:before,
&:after {
border-bottom: var(--border-value);
}
&:before {
left: 0;
border-left: var(--border-value);
}
&:after {
right: -2px;
border-right: var(--border-value);
}
}
}
}
8 4 5 6
3 2 1 5
2 3 7 4
7 1 5 9
