邊框寬度取決於屏幕尺寸

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>