Question

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

显然只是显示100％宽度和100％高度的div。我想要它做的是以一定角度覆盖整个屏幕，所以你看不到左/右角。如果我将宽度扩展到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上的溢出以隐藏角落并阻止底部滚动条：

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

Answer 2

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

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

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

由于

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

2 个答案: