创建偏斜响应背景

Question

我正在寻找这种背景。而且我不得不承认自己遇到了麻烦……找不到解决问题的好方法。

例如，我尝试使用transform : skewY(-6deg)。但是-6deg是我的整个页面。

有人可以帮助我找到做这件事的好方法吗？

感谢您的帮助！

Answer 1

您可以使用多个背景和渐变：

.box {
  height:250px;
  padding:50px 0;
  background:
    linear-gradient(to bottom left,transparent 49%,#0060ff 50%)top/100% 50px,
    linear-gradient(#0060ff,#0060ff) center/100% calc(100% - 100px),
    linear-gradient(to top right,transparent 49%,#0060ff 50%)bottom/100% 50px,
    
    
    linear-gradient(to bottom right,transparent 49%,#00dbf8 50%)top/100% 50px;
  background-repeat:no-repeat;
}

<div class="box">
</div>

您可以使用CSS变量使其更加灵活，以轻松控制倾斜：

.box {
  height:150px;
  padding:var(--p,50px) 0;
  background:
    linear-gradient(to bottom left,transparent 49%,#0060ff 50%)top/100% var(--p,50px),
    linear-gradient(#0060ff,#0060ff) center/100% calc(100% - 2*var(--p,50px)),
    linear-gradient(to top right,transparent 49%,#0060ff 50%)bottom/100% var(--p,50px),
    
    
    linear-gradient(to bottom right,transparent 49%,#00dbf8 50%)top/100% var(--p,50px);
  background-repeat:no-repeat;
}

<div class="box">
</div>
<hr>
<div class="box" style="--p:100px;">
</div>
<hr>
<div class="box" style="--p:40px;">
</div>

Answer 2

我相信这是一个很好的起点：

<div class="container">
  <div class="skewed">
    <div class="content">
      <p>Content of the skewed container</p>
    </div>
  </div>
</div>

和CSS：

body,
html {
  padding: 0;
  margin: 0;
}

.container {
  overflow: hidden;
}

.skewed {
  height: 400px;
  -webkit-transform: skewX(-6deg);
  -moz-transform: skewX(-6deg);
  -ms-transform: skewX(-6deg);
  -o-transform: skewX(-6deg);
  transform: skewX(-6deg);
  background-color: #2980b9;
}

.content {
  -webkit-transform: skewX(6deg);
  -moz-transform: skewX(6deg);
  -ms-transform: skewX(6deg);
  -o-transform: skewX(6deg);
  transform: skewX(6deg);
}

p {
  margin: 0;
  color: #ffffff;
}

Code