<!DOCTYPE html>
<style>
div {
position: absolute;
}
/* Hide the scrollbar and scroll corner of #resize to show the resizer only. */
#resize::-webkit-scrollbar {
width: 20px;
height: 20px;
opacity: 0;
}
#resize::-webkit-scrollbar-corner {
opacity: 0;
}
</style>
<div style="width: 100px; height: 100px">
<!-- matches the horizontal scrollbar -->
<div style="width: 20px; height: 100px; right: 0; top: 0; background: blue"></div>
<!-- matches the vertical scrollbar -->
<div style="width: 100px; height: 20px; left: 0; bottom: 0; background: blue"></div>
<!-- matches the scroll corner -->
<div style="width: 20px; height: 20px; right: 0; bottom: 0; background: yellow"></div>
<!-- matches the horizontal scrollbar thumb -->
<div style="width: 20px; height: 20px; left: 0; bottom: 0; background: green"></div>
<!-- matches the vertical scrollbar thumb -->
<div style="width: 20px; height: 40px; top: 0; right: 0; background: green"></div>
<!-- matches the resizer -->
<div id="resize" style="width: 100px; height: 100px; left: 0; top: 0; resize: both; overflow: scroll"></div>
</div>