旋转 div 并让它显示在整个屏幕上答案

【问题标题】：Rotate div and have it displayed across entire screen旋转 div 并让它显示在整个屏幕上
【发布时间】：2015-12-08 19:25:08
【问题描述】：

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

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

有没有办法让它以一个角度显示，这样它就不会显示角落并且是整个屏幕？

小提琴：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>

【问题讨论】：

标签： html css css-shapes

【解决方案1】：

您可以为旋转的矩形使用伪元素，并在父 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>

【讨论】：

距离越来越近了。有没有办法让它只隐藏浏览器侧面的溢出，因为它在顶部切割它。
@factordog 是的，您需要绝对定位伪元素（我相应地编辑了答案中的代码）。
正确地从第一个答案中提取并使其适应您的伪。我为 .slide: 添加了一个高度，大约为 200% 之后，就得到了我想要的角度效果。感谢您的帮助！
啊，我知道你做了什么。比我的解决方案好很多。感谢您的帮助！

【解决方案2】：

问题是 div 的角是正方形的，所以如果你旋转一个矩形 x 度，你会失去一些宽度。

例如，理想的解决方案是增加大小并减去左边距。

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

谢谢

【讨论】：

这确实使问题少了一点。但是，它仍然存在扩展宽度向右推出的问题。
在其周围包裹一个 div 并添加溢出隐藏。