Create ASCII art box-drawing with a background color contained inside the outline of its char lines
12:21 12 May 2025

I want to create a unique ASCII art box with a background color that is limited to the inside of the box outlines. The only way I can think of is to take two divs and overlay them and adjust to fit, as I have done in the snippet.

This is a very cumbersome method, and I will be making boxes in different shapes. Is there a better way to do this, so one can more easily create boxes of many different sizes?

.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                                                                                                   │ │ │
│ │ │                                                                                                                             │ │ │
│ │ │                                                                                                                             │ │ │
│ │─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─│─│
└───│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│───┘
    └─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

html css