我试图在我的网站背景上放置一个背景颜色形状，就像一个大的div旋转，但问题是当我把这个背景放在我想要的地方时，它会给我带来很大的空白；底部(因为我为放置背景创建的div的末尾(
以下是我所做的：
.fill-2{
position: absolute;
top: 45%;
width: 100%;
z-index: -2;
background-color: #A08823;
opacity: 30%;
height: 200vh;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}<body>
<div class="fill-1"></div>
<div class="container">
<!-- my content -->
</div>
<div class="fill-2"></div>
</body>这个问题有点不清楚，但这里有一些提示：绝对定位(背景(元素应该是主元素的子元素。然后，您可以将position: relative;、overflow: hidden;和固定的height应用于主元素(在下面的示例中为.container(，这将隐藏背景中超出主元素的部分：
.fill-2 {
position: absolute;
top: 45%;
width: 100%;
z-index: -2;
background-color: #A08823;
opacity: 30%;
height: 200vh;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.container {
height: 300px;
position: relative;
overflow: hidden;
}<body>
<div class="fill-1"></div>
<div class="container">
<!-- my content -->
<div class="fill-2"></div>
</div>
</body>如果通过"大幅度"；你的意思是，形状在视口上延伸，滚动条出现，那么你应该在你的父元素上设置overflow: hidden;，在你的例子中是<body>，就像这样：
.fill-2 {
position: absolute;
top: 45%;
width: 100%;
z-index: -2;
background-color: #a08823;
opacity: 30%;
height: 200vh;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
body {
overflow-x: hidden;
}<body>
<div class="fill-1"></div>
<div class="container">
<!-- my content -->
</div>
<div class="fill-2"></div>
</body>添加溢出：隐藏；我希望这会奏效！干杯