JSFiddle - React, Tailwind, and code Playground

HTML

<div class="day_box"></div>
<div id="debug"></div>

CSS

html, body { margin: 0; }

.day_box, .upper_left_hover, .lower_right_hover, .full_day {
  background: url(http://www.madproject.com/files/corner-sprites.png);
  border: 1px solid black;
  width: 25px;
  height: 25px;
  float: left;
  margin: 100px;
}

.upper_left_hover { background-position: 75px 0; }
.lower_right_hover { background-position: 50px 0; }
.full_day { background-position: 25px 0; }

JavaScript

$(".day_box2").hover(function(event){
    var offset = $(this).offset();
    var h = $(this).height() + offset.top;
    if((h - event.pageY)>(event.pageX - offset.left)) {
        console.log("Upper left");
        $(this).toggleClass("upper_left_hover");
    } else {
        console.log("Lower right");
        $(this).toggleClass("lower_right_hover");
    }
});

$('.day_box').mousemove(function(ev) {
    var offset = $(this).offset();
    
    var x = ev.pageX - offset.left;
    var y = ev.pageY - offset.top;
    var height = $(this).height();
    var width = $(this).width();
    
    
    var dd = height * x + width * y - width * height; 
    var whichTriangle = dd < 0 ? 'TopLeft' : 'BottomRight';

    if(dd < 0)
    {
        $(this).removeClass("lower_right_hover");
        $(this).addClass("upper_left_hover");
    }
    else
    {
        $(this).addClass("lower_right_hover");
        $(this).removeClass("upper_left_hover");
    }
    
    var s = x + ', ' + y + ', ' + width + ', ' + height + '<br />';
    s += 'hovering over: ' + whichTriangle;
    
    $('#debug').html(s);
});