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?

Eumenides

@LGSon would that second option work with multiple areas? – Eumenides

You can add more stops – Angleaangler

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>

Angleaangler

using your first option makes the background parallelogram, but it's not reaching the sides. Any ideas? – Eumenides

@Eumenides My intention were to show a how-to, not a full setup, still, updated first option – Angleaangler

Thanks a lot! Not quite there yet but it's getting pretty close. The use of "vw" and "translate" made the difference! – Eumenides

Answer 2

I really like the css generated content method of Jeremy Frank - he even provides a cool SASS-Mixin in his article: https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

I use this variation alot:

/*
 * Angled-edges
 */

@mixin angle($pseudo, $flip: false, $use-background-color: false, $angle: 3deg) {
  // $pseudo: before, after, both
  @if $pseudo == 'before' or $pseudo == 'after' or $pseudo == 'both' {
    position: relative;
    z-index: 1;
    $selector: if($pseudo == 'both', '&:before,&:after', '&:#{$pseudo}');

    #{$selector} {
      @if $use-background-color {
        background: $color__background-body;
      } @else {
        background: inherit;
      }
      content: '';
      display: block;
      height: 50%;
      left: 0;
      position: absolute;
      right: 0;
      z-index: -1;
      -webkit-backface-visibility: hidden;
    }

    @if $pseudo == 'before' {
      #{$selector} {
        top: 0;

        @if $flip {
          transform: skewY($angle * -1);
          transform-origin: 0 0;
        } @else {
          transform: skewY($angle);
          transform-origin: 100% 0;
        }
      }
    }

    @if $pseudo == 'after' {
      #{$selector} {
        bottom: 0;

        @if $flip {
          transform: skewY($angle);
          transform-origin: 0 100%;
        } @else {
          transform: skewY($angle * -1);
          transform-origin: 100%;
        }
      }
    }

    @if $pseudo == 'both' {
      &:before {
        top: 0;

        @if $flip {
          transform: skewY($angle * -1);
          transform-origin: 0 0;
        } @else {
          transform: skewY($angle);
          transform-origin: 100% 0;
        }
      }

      &:after {
        bottom: 0;

        @if $flip {
          transform: skewY($angle);
          transform-origin: 0 0;
        } @else {
          transform: skewY($angle * -1);
          transform-origin: 100%;
        }
      }
    }
  }
}

Snout

Thanks for your answer. I used Jeremy's articles as a starting point. I was trying to have the site as lightweight as possible, thus not using any sass at this point. Will try and see what it gives. – Eumenides

tried using your code, but failed. The edge of the pseudo element is skewed, but the angle in the design is so that it breaks the whole code. It creates 2 skewed parallelograms not one big block. Any ideas? – Eumenides