html - 创建倾斜响应背景

Question

我正在寻找制作这种背景。而且我不得不承认我遇到了麻烦......找不到好的方法。

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

有人可以帮我找到好的方法吗？

感谢您的帮助!

Answer 1

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

<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