具有响应式文本的标题每换行应有一个背景

Question

我正在寻找一位可以帮助我解决以下问题的 CSS 大师：

我正在开发一个响应式卡片容器（一行中显示的卡片数量取决于浏览器屏幕大小），其中包含包含标题的卡片组件。现在我的主要部分标题有一定的设计，设计如下：

在卡片组件内实现相同设计的问题是文本会根据屏幕尺寸做出响应并相应地使用多行。问题是，使用相同的编码技术，我得到以下输出：

我希望得到的结果是，每条响应缩放的新行之间都有一些间隔的背景，而不是第二个图像中的块。因此，在上面的示例中，它会像：“想要进入”背景并“触摸”相同风格的单独背景。

现在我正在整个应用程序中使用以下类似的代码来完成此操作：

<div class="highlight-container">
  <span class="highlight">{{ section?.title?.key | translate | uppercase }}</span>
</div>

.highlight-container, .highlight, .subtitle, .subtitle-highlight {
  position: relative;
}

.highlight-container:before {
  content: " ";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: $accent-color;
  z-index: -1;
  left: -30px;
  border-radius: 4px;
  padding: 0px 0px 0px 50px;
  box-shadow: 7px 7px rgba(255, 126, 103, 0.4);
}

但我想要一个从头开始的解决方案，因为本例中的标题位于我仍在设计的卡片组件内。

Answer 1

这是一个没有半径的解决方案的想法（稍后我会添加另一个）

h1 {
  --o: 7px; /* control the offset */

  max-width: 400px;
  font-size: 45px;
  line-height: 1.3;
  padding-bottom: var(--o);
  font-family: sans-serif;
  text-align: center;
  margin: auto;
  color: #fff;
  
  background:
   conic-gradient(from 180deg at calc(100% - var(--o)) 40%,red  25%,#0000 0)
    0 100%/100% 1.3em content-box,
   conic-gradient(from 90deg  at var(--o)              40%,pink 25%,#0000 0)
    0 100%/100% 1.3em;
  clip-path: inset(var(--o) 0 0);
  
}



body {
  background: lightblue;
}

<h1>Some text taking many lines</h1>