Question

我正在为网站上的部分创建对角线的顶部和底部部分。

我想知道是否有一个简单的jquery解决方案来根据屏幕大小设置边框宽度的样式？我不能使用带有溢出的设置长尺寸：隐藏，因为对角线不是正确的角度。

我能看到使角度保持一致的唯一方法是让jquery根据屏幕尺寸设置边框宽度。

.odd-section-top {
border-width: 0px 0 60px 2880px;
border-style: solid solid solid dashed;
border-color: transparent transparent #23264c transparent;
}

.odd-section-middle {
min-height: 600px;
padding: 50px 0;
background: #23264c;
}

.odd-section-bottom {
border-width: 0 2880px 60px 0;
border-style: solid dashed solid solid;
border-color: transparent #23264c transparent transparent;
}

然后Jquery会生成一个可以读取的样式

.odd-section-top {
border-left-width:
}

.odd-section-bottom {
border-right-width:
}

根据屏幕尺寸填充数字。

谢谢！

Answer 1

您可以在Javascript中执行所有操作：

var borderWidth = $elem.css("border-left-width");
$(".odd-section-top").css("border-width", borderWidth);

您可以根据自己的逻辑进行调整。

Answer 2

试过这个，但我知道我搞砸了一些语法。我还是更新的javascript和jquery。这是在正确的轨道上吗？

<script>
$(document).ready(function () {
responsiveradio.initBorders = function () {

    var $window = $(window),
        $topOddBox = $('.odd-section-top'),
        $botOddBox = $('.odd-section-bottom'),
        $topEvenBox = $('.even-section-top'),
        $botEvenBox = $('.even-section-bottom'),
        ;

    function resetBorders() {
        var w = $window.width(),
        $topOddBox.css('border-left-width', w);
        $botOddBox.css('border-right-width', w);
        $topEvenBox.css('border-left-width', w);
        $botEvenBox.css('border-right-width', w);
    }  
});
</script>

边框宽度基于屏幕尺寸

2 个答案: