Border & background pour titres

Bonjour tout le monde,

Je souhaiterai réalisé pour mon site web des titres de ce type (pièce jointe). Problème, impossible de trouver une solution pour appliquer le pattern qui est décalé en fond. Je pensais appliquer un background ou une shadow-box mais rien ne fonctionne. Est-ce possible à réaliser en CSS ? Je préfèrerai éviter d'utiliser des images pour avoir des titres dans ma page.

Merci d'avance !

Bonjour,

Sur la deuxième image, il manque soit un padding ou la structure en deux element n'est pas respectée.
L'exemple utilise cette structure:

<hn>
   <b> Texte du titre </b>
</hn>

Où
- le parent reçoit le fond, est découpé sur deux coin et dégage une zone sur le bas et la gauche avec un padding.
- l'enfant reçoit un fond blanc , une bordure et un display:block .

En utilisant une classe, on peut simplifier pour la réutiliser plusieurs fois en respectant une structure composée de deux éléments.

<h2 class="titreBleu">
  <b>un titre</b>
</h2>

et

.titreBleu {
  padding: 0 0.5em 0.5em 0;
  color: #0008c2;
  background: url(pattern.ext);
  clip-path: polygon(
    calc(100% - 0.51em) 0,
    calc(100% - 0.51em) 0.51em,
    100% 0.51em,
    100% 100%,
    0.51em 100%,
    0.51em calc(100% - 0.51em),
    0 calc(100% - 0.51em),
    0 0
  );
}
.titreBleu b {
  display: block;
  background: white;
  border: solid 10px;
  padding: 0.25em 0.5em;
}

Cordialement