css - 倾斜div时防止从左向右滚动

Question

我在这里搜索但找不到答案，如果之前有人问过这个问题，我深表歉意。

无论如何，我正在创建一个网站，我使用的效果之一是倾斜的 div 效果。

但是当我使用变换创建它时，出于某种原因旋转和倾斜它会使网站从左向右滚动。

我试过将溢出隐藏在父 div 上，但它随后隐藏了倾斜效果。

这是我的代码...

HTML:

<div class="container">
    <div class="slant"></div>

    <!-- rest of the code goes here -->
</div>

CSS:

.container{width:100%;position:relative;}
.slant{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    top: -45px;
    position: absolute;
    width: 100%;
    background-color: inherit;
    left: 0;
    height: 120px;
    overflow: hidden;
    z-index: 200;
    -webkit-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
    -mox-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
    -ms-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
    -o-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
    transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
}

我听说你可以用::before 伪元素来做到这一点，但说实话，我不知道如何做，也找不到教程来告诉我。

欢迎任何帮助，我们将不胜感激

谢谢

Answer 1

您是否出于某些重要原因使用 scale(1.1,1)？您可以删除它，也可以从 body 中删除默认边距和填充，以便容器缩小到浏览器的宽度。然后一切正常(在 Chrome、FF、IE11 中测试)。

您的 CSS 将如下所示:

body {margin:0px;padding:0px;}
.container{width:100%;position:relative;}
.slant{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    top: -45px;
    position: absolute;
    width: 100%;
    background-color: inherit;
    left: 0;
    height: 120px;
    overflow: hidden;
    z-index: 200;
    width:100%;
    -webkit-transform: rotate(-2deg) skew(-2deg) ;
    -mox-transform: rotate(-2deg) skew(-2deg) ;
    -ms-transform: rotate(-2deg) skew(-2deg);
    -o-transform: rotate(-2deg) skew(-2deg) ;
    transform: rotate(-2deg) skew(-2deg);
    background-color: red;
}