Я собираюсь преобразовать это изображение PSD в CSS. У меня несколько h2s на нескольких страницах, поэтому длина внутреннего текста и цвет фона могут различаться. Поэтому фон должен автоматически адаптироваться к «любой» длине.

Пока что разметка выглядит примерно так:

<h2 class="sub-heading lab-heading">Laboratori</h2>

Я могу в конечном итоге обернуть внутренний текст в<span>, но сохранить семантически правильную разметку без каких-либо дополнительных элементов было бы просто.

Внутренний текст поворачивается, но это не обязательно. То, на чем я сейчас фокусируюсь, это перекос фона.

Я открыт для любого решения, использующего масштабированные фоновые png (например, background-size: cover), псевдоэлементы, canvas и т. Д. Но оно должно быть модульным.

Большое спасибо за любое предложение.

[обновление] Графический пример того, что я ищу:

[важное примечание] За h2 естьнеправильный рисунок (не "сплошной" цвет фона)