Создайте художественный блок-рисунок ASCII с цветом фона, содержащимся внутри контура его символьных линий. ⇐ Html

[Anonymous]

Я хочу создать уникальный художественный блок ASCII с цветом фона, который ограничен внутренней частью контуров блока.
Единственный способ, который я могу придумать, — это взять два элемента div, наложить их и настроить по размеру, как я сделал во фрагменте.
Это очень громоздкий метод, и я буду создавать блоки различной формы. Есть ли лучший способ сделать это, чтобы можно было легче создавать блоки разных размеров?

Код: Выделить всё

.outer {
position: relative;
display: inline-block;
}

pre {
color: black;
display: inline-block;
margin: 0;
padding: 0;
font-family: monospace;
position: relative;
z-index: 10;
}

.bg-1,
.bg-2 {
background-color: blue;
position: absolute;
z-index: 1;
}

.bg-1 {
top: 1ch;
left: 4px;
width: calc(100% - 8px);
height: calc(15ch - 1px);
}

.bg-2 {
top: 1ch;
left: calc(4ch);
width: calc(100% - 8ch);
height: calc(17ch - 1px);
}

Код: Выделить всё

┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ :██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ . : │
│ └-│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│-┘ │
│ ┌─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─┐ │
│ │ │                                                                                                                             │ │ │
│ │ │             color in here                                                                                                   │ │ │
│ │ │                                                                                                                             │ │ │
│ │ │                                                                                                                             │ │ │
│ │─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─│─│
└───│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│───┘
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

Подробнее здесь: https://stackoverflow.com/questions/796 ... the-outlin