I am currently working on creating a diagonal div at the bottom of another div. I want it to have a design similar to this: .
I encountered an issue when I tried adding a 100vw value to my border-left, as it caused a horizontal scrollbar to appear on my website. I attempted to use jQuery to find the width of the body, which worked initially. However, resizing the browser did not update the border width. Any suggestions on how to resolve this?
var actualInnerWidth = $(".background-gradient").prop("clientWidth");
$('.background-gradient').css({
'border-top':'50px solid red',
'border-left': actualInnerWidth + 'px solid transparent'
}); .banner {
min-height: 50vh;
margin: 0;
padding:0;
background-color: red;
}
.background-gradient {
width:100%;
height:50px;
background-color:yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="jumbotron banner">
</div>
<div class="background-gradient">
</div>You can view the jsfiddle for this project here: https://jsfiddle.net/b49mmm9a/1/