有人可以告诉我如何使顶部倾斜的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

ricochet robots
settlers of catan
acquire
Hi! How are you?
Can you hear me?

 Added new line 

this is very valuable
finish

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>