<div class="container">
    <div class="content">
        The content is not transformed
    </div>
</div>
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica;
}

:root {
    --value: 15deg;
}

@media screen and (min-width: 1440px) {
    :root {
        --value: 5deg;
    }
}

.container {
    transform: skewX(var(--value));
  background-color: tomato;
  
}
.container > * {
    transform: skewX(calc(-1 * var(--value)));
}

.content {
  padding: 1.5rem 2rem;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.