creating a responsive skewed background with css

Question

I'm trying to create a skewed background on my website. The blocks will all have a skewed top and bottom line (like a parallelogram).

design example

Tried using css:

transform: skewY(-30deg);

but it's not working responsively. Any thoughts on a good practice?

Answer 1

Here is a start, both very lightweight

Using a pseudo element

.wrapper div.skew::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;
  height: 100%;
  transform: translate(-50%, -50%) rotate(-30deg) skew(-30deg);
  background: lightgray;
  z-index: -1;
}

.wrapper {
  overflow: hidden;
}

.wrapper div {
  position: relative;
  padding: 50px;
  border: 1px dashed gray;
  text-align: center;
}

.wrapper div.skew::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;
  height: 100%;
  transform: translate(-50%, -50%) rotate(-30deg) skew(-30deg);
  background: lightgray;
  z-index: -1;
}

<div class="wrapper">
  <div>
    Some text
  </div>
  <div class="skew">
    Some text
  </div>
  <div>
    Some text
  </div>
</div>

---

Using linear-gradient

html {
    background: linear-gradient(
                 -30deg, 
                 transparent 40%,
                 #bbb 40%,
                 #bbb 60%,
                 transparent 60%);
}

html {
    background: linear-gradient(
                 -30deg, 
                 transparent 40%,
                 #bbb 40%,
                 #bbb 60%,
                 transparent 60%);
}
div {
  position: relative;
  padding: 50px;
  border: 1px dashed gray;
  text-align: center;
}

<div>
Some text
</div>
<div class="skew">
Some text
</div>
<div>
Some text
</div>