Voy a convertir esta imagen PSD a CSS. Tengo varios h2 en varias páginas, por lo que la longitud del texto interno y el color de fondo pueden variar. Por lo tanto, el fondo debe adaptarse automáticamente a "cualquier" longitud.

Hasta ahora, el marcado es algo como:

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

Eventualmente puedo envolver el texto interno en una<span>, pero mantener un marcado semántico válido sin ningún elemento adicional sería ♥.

El texto interno se gira, pero no es obligatorio. En lo que me estoy centrando ahora es el fondo sesgado.

Estoy abierto a cualquier solución utilizando pngs de fondo escalados (por ejemplo, background-size: cover), pseudo-elementos, lienzo, etc. Pero debe ser modular.

Muchas gracias por cualquier sugerencia.

[actualización] un ejemplo gráfico de lo que estoy buscando:

[nota importante] Detrás del h2 hay unpatrón irregular (No es un fondo de color "sólido")