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

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%;
        }
      }
    }
  }
}

Answer 2

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>