Question

我正在使用一个轻微的黑客在我的页面上的部分之间有对角线边框（因为我找不到一种不同的方式使其工作），其中包括在'border'divs中添加了超厚边框。它在计算机上很好但在手机上（所有我测试过的）都有坚固的边框，你可以水平滚动到页面上的“空白区域”，只看到边框伸出来。有谁知道如何阻止这种情况，或建议采用不同的方式来创建对角线？

该页面具有响应性并填充浏览器窗口，这就是为什么我需要一个巨大的边框尺寸，以确保即使在高清显示器上它也会存在...

.border-black-white {
    border-color: transparent transparent #fff #2d2d2d ;
    border-width: 0 0 60px 2600px;
    border-style: solid;
}
.border-yellow-white {
    border-color: transparent transparent #fff transparent ;
    border-width: 0 0 60px 2600px;
    border-style: solid;
}
section {
    width: 80%;
    margin: 0 auto;
    padding: 3em 10%;
}

以下是所有代码的小提琴：http://jsfiddle.net/UnX72/

谢谢！

更新：我已经尝试过overflow：hidden（或者overflow-x：hidden），但是没有用。

Answer 1

我认为不可能隐藏边框创建的溢出，即使在桌面浏览器上也是如此，至少在我安装的任何一个浏览器中都没有，我尝试过与你类似的方法来测试这个和也有同样的问题，所以我认为最好不要使用边框，所以我创建了一个div并放置另一个（带有一个伪元素）并旋转以获得相同的效果，所以我的猜测是这应该工作适合你想要的东西，如果不是，我希望它能为你提供另一种选择。

Here is the jsfiddle Demo

<强> HTML

<section>
    <div>
        <p> Section 1</p>
    </div>
</section>
<div class="diagonal">

</div>  
<section>
    <div>
        <p> Section 2</p>
    </div>
</section>
<div class="diagonal"></div>
<section>
    <div>
        <p> Section 3</p>
    </div>
</section>
<div class="diagonal"></div>

<强>的CSS

section {
    width: 80%;
    margin: 0 auto;
    padding: 3em 10%;
    background: red;
    overflow:hidden;
}
.diagonal{
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: relative;
}
.diagonal:after{
    content: '';
    height: 40px;
    background: black;
    display: block;
    position: absolute;
    top: -39px;
    left: -5px;
    width: 200%;
    transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(-2deg);
}

您可以在此处检查rotate属性的兼容性

http://caniuse.com/transforms2d

注意：根据容器的大小，＆＃34;对角线＆＃34;需要将其置于正确的位置，您可以使用媒体查询或javascript。

如何阻止移动设备上的边界溢出？

1 个答案: