<h2><span>A title <br> with many lines<br> of text</span></h2>
<h2 class="alt" style="--d:.4em"><span>A title <br> with 2 lines</span></h2>

h2 span { 
  --d: .3em; /* control the depth */
  line-height: 2; /* control the distance between boxes */
  padding-block: .1em calc(.1em + var(--d));
  padding-inline:.2em calc(.2em + var(--d));
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  background:
    conic-gradient(at right var(--d) bottom var(--d),#0004 37.5%,#0008 0 75%,#0000 0) 
    #d81a14; /* the main color */
  -webkit-mask:
    linear-gradient(45deg,#0000 calc(var(--d)*cos(45deg)),#000 0 calc(100% - var(--d)*cos(45deg)),#0000 0);
}
h2.alt span {
  padding-inline: calc(.2em + var(--d)) .2em;
  background:
    conic-gradient(at left var(--d) bottom var(--d),#0000 25%,#0008 0 62.5%,#0004 0)
    #2699dc; 
  -webkit-mask:
    linear-gradient(-45deg,#0000 calc(var(--d)*cos(45deg)),#000 0 calc(100% - var(--d)*cos(45deg)),#0000 0);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  place-items: center;
  gap: 80px;
  background: #f2f2f2;
}

h2 {
  font-family: sans-serif;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 2.5rem;
}