使用 css 创建响应式倾斜背景

Question

我想在我的网站上创建一个倾斜的背景。这些块都有一条倾斜的顶线和底线（像平行四边形）。

design example

尝试使用 css：

transform: skewY(-30deg);

但它没有响应。有什么好的做法吗？

Answer 1

这是一个开始，两者都很轻巧

使用伪元素

.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>

使用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>

Answer 2

我非常喜欢 Jeremy Frank 的 css 生成内容的方法 - 他甚至在他的文章中提供了一个很酷的 SASS-Mixin： https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

我经常使用这个变体：

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

使用 css 创建响应式倾斜背景

creating a responsive skewed background with css

html

css

background

skew