<span class="depth">A title <br> with many lines<br> of text</span>

.depth { 
  --d: .3em; /* control the depth */
  padding-block: .1em calc(.1em + var(--d));
  padding-inline:.2em calc(.2em + var(--d));
  background:
    conic-gradient(at right var(--d) bottom var(--d),
      #0004 37.5%,#0008 0 75%,#0000 0) 
    #d81a14; /* the main color */
  clip-path: polygon(0 0,calc(100% - var(--d)) 0,100% var(--d),100% 100%,var(--d) 100%, 0 calc(100% - var(--d)));
  text-align: center;
}

body {
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 30px;
  color: #fff;
}
h2 {
  font-size: 30px;
}