如何便捷实现背景色限定在框内的多尺寸ASCII艺术框？

问题描述 #

我想要创建背景色仅局限于框线内部的独特ASCII艺术框，目前用两个div叠加的方法（如下代码）实现，但这种方式繁琐，且难以适配不同形状的框，求更便捷的多尺寸适配方案。

原实现代码：

<div class="outer">
  <div class="bg-1"></div>
  <div class="bg-2"></div>
  <pre>┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ :██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ . : │
│ └-│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│-┘ │
│ ┌─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─┐ │
│ │ │                                                                                                                             │ │ │
│ │ │             color in here                                                                                                   │ │ │
│ │ │                                                                                                                             │ │ │
│ │ │                                                                                                                             │ │ │
│ │─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─│─│
└───│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│───┘
    └─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘</pre>
</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);
}

优化方案 #

方案1：CSS clip-path 精准裁剪背景 #

用单个伪元素做背景，通过clip-path裁剪出和ASCII框内部完全匹配的形状，无需额外div，调整裁剪路径即可适配不同框型。

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

.ascii-box {
  position: relative;
  display: inline-block;
  font-family: monospace;
}

.ascii-box::before {
  content: '';
  position: absolute;
  top: 1ch;
  left: 4ch;
  width: calc(100% - 8ch);
  height: calc(13ch);
  background: blue;
  /* 根据ASCII框轮廓调整裁剪路径 */
  clip-path: polygon(
    0 0, 
    calc(100% - 2ch) 0, 
    calc(100% - 2ch) 2ch, 
    100% 2ch, 
    100% calc(100% - 2ch), 
    calc(100% - 2ch) calc(100% - 2ch), 
    calc(100% - 2ch) 100%, 
    0 100%, 
    0 calc(100% - 2ch), 
    2ch calc(100% - 2ch), 
    2ch 2ch, 
    0 2ch
  );
  z-index: -1;
}

.ascii-box pre {
  margin: 0;
  padding: 0;
  color: black;
  position: relative;
  z-index: 1;
}

方案2：SVG遮罩实现复杂形状适配 #

针对不规则的ASCII框，用SVG绘制精准匹配的遮罩层，背景通过遮罩仅显示框内区域，缩放兼容性更好。

<div class="ascii-box">
  <svg class="mask" viewBox="0 0 800 120" preserveAspectRatio="none">
    <defs>
      <mask id="ascii-mask">
        <!-- 绘制与ASCII框内部完全匹配的路径 -->
        <path d="M32 16 L768 16 L768 32 L736 32 L736 96 L768 96 L768 112 L32 112 L32 96 L64 96 L64 32 L32 32 Z" fill="white"/>
      </mask>
    </defs>
    <rect width="100%" height="100%" fill="blue" mask="url(#ascii-mask)"/>
  </svg>
  <pre>┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ :██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ . : │
│ └-│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│-┘ │
│ ┌─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─┐ │
│ │ │                                                                                                                             │ │ │
│ │ │             color in here                                                                                                   │ │ │
│ │ │                                                                                                                             │ │ │
│ │ │                                                                                                                             │ │ │
│ │─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─│─│
└───│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│───┘
    └─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘</pre>
</div>

.ascii-box {
  position: relative;
  display: inline-block;
  font-family: monospace;
}

.ascii-box .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.ascii-box pre {
  margin: 0;
  padding: 0;
  color: black;
  position: relative;
  z-index: 1;
}

方案3：直接给文本空白区加背景 #

如果ASCII框内部是规则文本区域，用<span>包裹需要背景的空白内容，直接给span设置背景，无需定位元素，操作最直观。

<pre class="ascii-box">┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ :██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ . : │
│ └-│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│-┘ │
│ ┌─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─┐ │
│ │ │<span class="bg">                                                                                                                             </span>│ │ │
│ │ │<span class="bg">             color in here                                                                                                   </span>│ │ │
│ │ │<span class="bg">                                                                                                                             </span>│ │ │
│ │ │<span class="bg">                                                                                                                             </span>│ │ │
│ │─│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│─│─│
└───│─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│───┘
    └─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘</pre>

.ascii-box {
  font-family: monospace;
}

.ascii-box .bg {
  background-color: blue;
}

内容的提问来源于stack exchange，提问作者Soma Juice