有人可以告诉我如何让顶部倾斜的div覆盖屏幕的整个顶部吗？

Question

我想让顶部倾斜的div覆盖屏幕的整个顶部，包括左上角的空白区域。有人可以告诉我一种可以做到的方法吗？

检查此链接，看看我希望它如何：https://imgur.com/a/JDaVuWf

谢谢！

body {
  margin: 0;
  padding: 0;
  color: #fff;
}

.skew {
  transform: skew(0deg, -10deg);
  background-color: gray;
  padding: 200px 0;
  margin-top: -100px;
  margin-bottom: 200px;
  width: 100%;
}

.content {
  text-align: center;
  transform: skew(0deg, 10deg);
}

.skew2 {
  transform: skew(0deg, -10deg);
  background-color: blue;
  padding: 200px 0;
  margin-top: -100px;
  margin-bottom: 200px;
}

.content2 {
  color: black;
  text-align: center;
  transform: skew(0deg, 10deg);
}

<section id="sec1">
  <div class="skew">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </div>
  </div>
</section>

<section id="sec2">
  <div class="skew2">
    <div class="content2">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </div>
  </div>
</section>

Answer 1

您可以使用:: before作为第一部分

#sec1:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px; //or what you need
    top: 0;
    left: 0;
    background: grey;
    transform: none;
    z-index: 1;
}

Answer 2

使用渐变可以轻松地使形状覆盖整个空间并且响应：

body {
  margin: 0;
  padding: 0;
}

.skew {
 padding:100px 0;
  color: #fff;
  text-align:center;
  background:
   linear-gradient(red,red) top/100% calc(100% - 100px) no-repeat,
   linear-gradient(to top left,transparent 49%,red 50.5%) bottom/100% 100px no-repeat;
}

.skew2 {
 margin-top:-50px;
 padding:120px 0;
 text-align:center;
 background:
   linear-gradient(to top left,transparent 49%,blue 50.5%) bottom/100% 100px no-repeat,
   linear-gradient(blue,blue) center/100% calc(100% - 200px) no-repeat,
   linear-gradient(to bottom right,transparent 49%,blue 50.5%) top/100% 100px no-repeat;
}

<section id="sec1">
  <div class="skew">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </div>
  </div>
</section>

<section id="sec2">
  <div class="skew2">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </div>
  </div>
</section>