JSFiddle - React, Tailwind, and code Playground

by Anton Ayupov

HTML

<div class="block block_blue"></div>
<div class="triangle"></div>
<div class="block block_gray"></div>

CSS

body {
    margin: 0;
}

.block {
    height: 200px;
}

.block_blue {
    background-color: blue;
}

.block_gray {
    background-color: gray;
}

.triangle {
    width: 0;
    height: 0;
    position: relative;
    z-index: 10;
}

JavaScript

$(document).ready(function () {
    var windowWidth = $(window).width();
    $(".triangle").css({
        "border-top": Math.ceil(windowWidth / 4) + 'px solid blue'
    });
    $(".triangle").css({
        "border-left": Math.ceil(windowWidth) + 'px solid transparent'
    });
    $('.block_gray').css("padding-top",Math.ceil(windowWidth / 4));
    $('.block_gray').css("margin-top",Math.ceil(-windowWidth / 4));

});

$(window).resize(function () {
    var windowWidthR = $(window).width();
    $(".triangle").css({
        "border-top": Math.ceil(windowWidthR / 4) + 'px solid blue'
    });
    $(".triangle").css({
        "border-left": Math.ceil(windowWidthR) + 'px solid transparent'
    });
    $('.block_gray').css("padding-top",Math.ceil(windowWidthR / 4));
    $('.block_gray').css("margin-top",Math.ceil(-windowWidthR / 4));
});