旋转 div 并显示在整个屏幕上

Question

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

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

有什么方法可以让它以一定的角度显示，这样它就不会显示角落并且横跨整个屏幕吗？

.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 的角是正方形的，因此如果您将矩形旋转 x 度，您将失去一些宽度。

理想的解决方案是增加尺寸并减去左边距。

width: 180%;
margin-left: -40%;

谢谢

Answer 2

您可以为旋转的矩形使用伪元素，并在父元素上设置溢出隐藏 div 以隐藏角落并防止底部滚动条：

.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>

旋转 div 并显示在整个屏幕上

Rotate div and have it displayed across entire screen

html

css

css-shapes