Question

所以，我正在尝试建立一个有偏斜部分的网站。

在网页的主要内容上我完全没有问题。

唯一的问题是在页脚上。页脚和页面底部之间有一个小空格，由最后一个倾斜部分引起。我已经尝试改变所有元素（正文，html，div部分，页脚等等）的位置，显示，边距，填充但是似乎没有工作......

这是我正在使用的偏差代码：

$deg: 3deg;
.skew {
    -ms-transform: skewY($deg); /* IE 9 */
    -webkit-transform: skewY($deg); /* Chrome, Safari, Opera */
    transform: skewY($deg);
}

这是我用我的代码制作的jsfiddle：http://jsfiddle.net/1keobbqc/

我希望你们能在这里帮助我！谢谢！

Answer 1

这是可以预料的，随着屏幕尺寸的增大，您的倾斜页脚的角度将无法始终与您的小页脚保持正确对齐。您可以做的是使用媒体查询来调整某些断点处的角度，使其保持更高的水平：

$deg: 3deg;
$deg-media: 8deg;

.skew {
   -ms-transform: skewY($deg); /* IE 9 */
   -webkit-transform: skewY($deg); /* Chrome, Safari, Opera */
   transform: skewY($deg);
}

.skew-rev {
   -ms-transform: skewY(-$deg); /* IE 9 */
   -webkit-transform: skewY(-$deg); /* Chrome, Safari, Opera */
   transform: skewY(-$deg);
}

@media only screen and (max-width: 1400px){ 
   .skew {
      -ms-transform: skewY($deg-media); /* IE 9 */
      -webkit-transform: skewY($deg-media); /* Chrome, Safari, Opera */
      transform: skewY($deg-media);
   }

   .skew-rev {
      -ms-transform: skewY(-$deg-media); /* IE 9 */
      -webkit-transform: skewY(-$deg-media); /* Chrome, Safari, Opera */
      transform: skewY(-$deg-media);
   }

}

这是一个夸张的示例，向您展示媒体查询的工作情况，将您的浏览器调整到800px以上/以下：

FIDDLE

Answer 2

如果你想要的是保持角度不变，并且想要确保左侧完美调整，只需说明状态

transform-origin: left bottom;

这样，页脚与左边框底部之间的垂直距离将保持不变（但页面宽度越大，页脚的正确尺寸就会越小）

与页脚偏斜的div不能正常工作

2 个答案: