<h2 >A title <br> with many lines<br> of text</h2>

h2 { 
  --d: .4em; /* control the depth */
  --s: .2em; /* control the space between boxes */
  line-height: 2; /* control the height of the boxes */

  padding-inline: calc(var(--d) + .2em) .2em;
  background: 
    conic-gradient(at var(--d) calc(100% - var(--d)),
      #0000 25%,#0008 0 62.5%,#0004 0) 0 calc((var(--d) - var(--s))/2)/100% 1lh 
    #2699dc; /* the main color */
  mask: 
    conic-gradient(from 90deg at var(--d) var(--s),
      #000 37.5%,#0000 0) 0    calc((var(--d) - var(--s))/2)/51% 1lh repeat-y,
    conic-gradient(from 45deg at calc(100% - var(--d)) calc(100% - var(--s)),
      #0000 62.5%,#000 0) 100% calc((var(--d) + var(--s))/2)/51% 1lh repeat-y;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
}

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