Erstellen Sie ASCII-Kunstbox-Zeichnen mit einer Hintergrundfarbe, die innerhalb der Überlinie seiner Zeichen Linien enth ⇐ HTML

[Anonymous]

Ich möchte eine einzigartige ASCII -Kunstbox mit einer Hintergrundfarbe erstellen, die auf die Innenseite der Umrisse der Box beschränkt ist. Viele unterschiedliche Größen?

Code: Select all

.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);
}< /code>




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