html - 旋转 div 并使其显示在整个屏幕上

Question

我有一个要旋转 -20 度的 div。我已经做到了这一点，我面临的问题是它没有在整个屏幕上显示它。

它显然只是显示一个 100% 宽度和 100% 高度的 div。我想让它做的是以一个 Angular 覆盖整个屏幕，所以你看不到左/右 Angular 。如果我将宽度扩展到 100% 以上，它会起作用，但这只会将整个浏览器的宽度推开。

有没有什么办法让它以一定 Angular 显示，这样它就不会显示 Angular 落并且横跨整个屏幕？

fiddle :https://jsfiddle.net/2dhkk03b/

.content {
  width: 70%;
  margin: 0 auto;
  position: relative;
  height: 700px;
}
.intro {
  width: 60%;
  text-align: left;
  position: absolute;
  top: 50px;
  color: black;
  font-weight: 300;
  font-size: 2em;
}
.para_txt {
  padding-top: 40px;
}
.intro p {
  font-size: 24px;
}
.slide {
  position: relative;
  width: 100%;
  background-color: red;
  height: 400px;
  transform: rotate(-20deg);
}

<div class="content">
  <div class="intro">
    <span>Hi there!</span>
    <p class="para_txt">My name</p>
  </div>
</div>
<div class="slide"></div>

Answer 1

您可以为旋转的矩形使用一个伪元素，并在父 div 上设置 overflow hidden 以隐藏 Angular 落并防止底部滚动条:

.content {
  width: 70%;
  margin: 0 auto;
  position: relative;
  height: 700px;
}
.intro {
  width: 60%;
  text-align: left;
  position: absolute;
  top: 50px;
  color: black;
  font-weight: 300;
  font-size: 2em;
}
.para_txt {
  padding-top: 40px;
}
.intro p {
  font-size: 24px;
}
.slide {
  position: relative;
  height: 1000px;
  overflow: hidden;
}
.slide:after {
  content: '';
  position:absolute;
  top:35%;
  width:100%; height: 30%;
  background: red;
  transform: rotate(-20deg);
}

<div class="content">
  <div class="intro">
    <span>Hi there!</span>
    <p class="para_txt">My name</p>
  </div>
</div>
<div class="slide">
</div>