<span class="depth">A title</span> <span class="depth">Another one</span>
<h2 class="depth">A block title</h2>
<span class="depth" style="display:inline-block;width: 200px">an inline block one</span>

.depth { 
  --d: .3em; /* control the depth */
  padding-block: .1em calc(.1em + var(--d));
  padding-inline: calc(.2em + var(--d)) .2em;
  background:
    conic-gradient(at left var(--d) bottom var(--d),
      #0000 25%,#0008 0 72.5%,#0004 0) 
    #2699dc; /* the main color */
  clip-path: polygon(100% 0,var(--d) 0,0 var(--d),0 100%,calc(100% - var(--d)) 100%, 100% 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;
}