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);
}

我听说你可以用::之前的伪元素做到这一点，但老实说我不知道如何找不到教程给我看。

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

由于

Answer 1

出于某种强烈的原因，你使用scale(1.1,1)吗？您可以将其删除，并从主体中删除默认边距和填充，以便容器缩小到浏览器的宽度。然后一切正常（在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;
}

在倾斜div时阻止从左向右滚动

1 个答案: