I am working on creating a responsive div with a sloped edge that needs to adjust according to the screen size. I have successfully maintained a consistent angle across all screen sizes, but I am facing an issue where the height calculation for $('#slope') is not always accurate. It seems to glitch when I resize the window or switch tabs.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div id="block">
<div id="content">
Some content<<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sint culpa, dolor quaerat autem repellendus, doloremque molestiae, natus ut veritatis eius deserunt mollitia. Eaque ex facilis nobis obcaecati dolorem odio veniam laudantium nemo voluptates voluptas nulla ducimus officia quod maiores corporis hic nisi incidunt aliquid fugiat tenetur at, labore earum. Sapiente perspiciatis, laudantium consectetur sed omnis porro quasi quae. Neque voluptatem, praesentium mollitia ad cumque voluptates ipsa dolores velit beatae odio veniam, voluptatum atque repellat. Minus perferendis, natus accusantium! Sunt architecto provident error commodi. Provident dolorum praesentium quis fuga saepe odio fugiat reiciendis laborum sed at facilis natus facere, dignissimos repellendus. Numquam fugiat consectetur deleniti tempora quibusdam distinctio nulla sequi voluptate inventore voluptas cupiditate eaque soluta neque optio rem vel autem adipisci id fuga sapiente voluptates harum, eius est qui. Asperiores molestiae recusandae cum non sint deserunt nisi aliquid dicta obcaecati ut repellat tenetur laudantium eaque, amet praesentium numquam laboriosam, beatae vitae vel. Tenetur recusandae dicta voluptate aperiam architecto saepe provident odit deleniti possimus consequatur libero voluptas sequi officia minima perspiciatis repellendus voluptates nostrum fugit voluptatem, vero. Minima, tempora vero dicta provident, ducimus nobis quibusdam nam blanditiis eligendi architecto pariatur, enim ut eos reiciendis quisquam aut, eum at porro esse!
</div>
<div id="slope">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
CSS
.row {
margin: 0 !important;
}
#block {
background-color: green;
width: 50%;
height: auto;
min-height: 150px;
position: relative;
}
#slope {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 100%;
background: #fff;
border-bottom: solid #fff;
border-left: solid green;
border-width: 0 0 0 0;
}
JS
$(document).ready(function() {
updateSize();
$(window).resize(function() {
updateSize();
});
});
function updateSize() {
$('#slope').css('border-width', '0 0 ' + $('#slope').height() + 'px ' + $('#slope').height()/6 + 'px');
}
To reproduce the glitch, try resizing the window. The slope should always maintain a consistent 10° angle from the top right corner.