Create ASCII art box-drawing with a background color contained inside the outline of its char lines

Question

I want to create a unique ascii art box with a background color that is limited to the the inside of the outlines the box. The only way i can think of is 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 diffrent shapes, is there a better way to do this, so one can more easily create boxes of many diffrent 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);
}

<div class="outer">

  <div class="bg-1"></div>
  <div class="bg-2"></div>
  <pre>┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ :██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ . : │
│ └-│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│-┘ │
│ ┌─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─┐ │
│ │ │                                                                                                                             │ │ │
│ │ │             color in here                                                                                                   │ │ │
│ │ │                                                                                                                             │ │ │
│ │ │                                                                                                                             │ │ │
│ │─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─│─│
└───│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│───┘
    └─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘</pre>

</div>

Answer 1

Some important considerations first, then a demo

• The parent .outer DIV has to have the same monospace styles as the child pre tag. That way you can move around the siblings backgrounds using the same character units. You can then use font: inherit; on your pre tag.
• To get the character widths CSS unit use: ch
• To get the character height as CSS unit use: lh
• Since the Box-Drawing Unicode starts somewhere in the character's center, offset it by 0.5ch from the left and 0.5lh from the top.
• Make use of the super useful CSS Properties (Vars) like --x, --y, --w, --h directly in the style="" attribute of your background DIVs. That way you won't have to create uselessly custom styles in CSS for every single DIV by its class. And therefore, you can get rid of custom classes (like .bg-N, which is also a styling antipattern).
• You already know how to use CSS calc(), just, see my changes

And a demo, finally:

* {
  margin: 0;
  box-sizing: border-box;
}

.outer {
  font: 1.5em monospace;
  position: relative;
  width: min-content;
}

pre {
  font: inherit;
  position: relative;
}

.bg {
  position: absolute;
  margin: 0.5lh 0.5ch;
  left: calc(var(--x) * 1ch);
  top: calc(var(--y) * 1lh);
  width: calc(var(--w) * 1ch);
  height: calc(var(--h) * 1lh);
  background-color: var(--bg);
}

<div class="outer">
      <div class="bg" style="--bg:#0bf3; --x:0; --y:0; --w:134; --h:9;"></div>
      <div class="bg" style="--bg:#f0b3; --x:2; --y:0; --w:130; --h:2;"></div>    
      <div class="bg" style="--bg:#fb03; --x:4; --y:0; --w:126; --h:10;"></div>
      <div class="bg" style="--bg:#b0f3; --x:2; --y:3; --w:130; --h:5;"></div>

      <pre>┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ :█T█e█s█t██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ . : │
│ └─┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─┘ │
│ ┌─┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─┐ │
│ │ │                                                                                                                             │ │ │
│ │ │             colors everywhere                                                                                               │ │ │
│ │ │                                                                                                                             │ │ │
│ │ │                                                                                                                             │ │ │
│ └─┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─┘ │
└───┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼───┘
    └─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘</pre>
    </div>

I've also fixed your Unicode box drawings with some ┼ and ┘ characters here and there, if you don't mind.

• https://developer.mozilla.org/en-US/docs/Web/CSS/length#ch
• https://developer.mozilla.org/en-US/docs/Web/CSS/length#lh