На skewX это делать геморрой один (только на глаз) + нужно иметь четкие размера контента блока посередине, иначе ширина скоса будет меняться каждый раз, — словом, жопа.
Поэтому так: clip-path на calc() + отрицательный margin по ширине скоса.
Обратите внимание на второй блок. Если контент будет больше и высота блока выше, чем минимальное, заранее заданное значение, есть небольшая проблема с углом наклона текста -- это не исправить на автоматическом уровне с помощью CSS, т. к. блок с текстом мы поворачиваем с помощью градусов, а скос родительского блока делаем с помощью плавающей координаты опорной точки.
EDGE и IE11 в полёте с динамическим clip-path — можно просто сделать изначально безо всяких наклонов, а для поддерживаемых браузеров с помощью media-запрос supports сделать следующее:
Простой
