JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
<body>
<div id="one">
</div>
<div id="two">
</div>
</body>
CSS
body {
margin: 20px;
}
#one {
max-width: 100%;
background-color: aqua;
height: 300px;
}
#two {
border-top: 100px solid red;
border-right: 250px solid transparent;
border-bottom: 100px solid transparent;
border-left: 250px solid transparent;
width: 0;
height: 0;
}
JavaScript
$(window).resize(function () {
var divWidth = $('#one').width();
$('#two').css({
borderLeftWidth: divWidth / 2,
borderRightWidth: divWidth / 2
})
});
$(window).trigger('resize');