JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    Top diamond boundaries:
</p>
<div>Left: <input id="left" type="text" value="113"></div>
<div>Right: <input id="right" type="text" value="337"></div>
<div>Top: <input id="top" type="text" value="2"></div>
<div>Bottom: <input id="bottom" type="text" value="227"></div>
<p>
    Point coordinates:
</p>
<div>X: <input id="x" type="text" value="260"></div>
<div>Y: <input id="y" type="text" value="179"></div>
<p>
    <button onclick="doTest();">Test point</button>
</p>

CSS

p {
    margin: 10px 0px;
    font-weight: bold;
}

JavaScript

function doTest()
{
    function getValue(id)
    {
        return parseFloat(document.getElementById(id).value);
    }
    alert(testPoint([[getValue("left"), getValue("top")],
                     [getValue("right"), getValue("bottom")]],
                    [getValue("x"), getValue("y")]));
}

function testPoint(topDiamond, coords)
{
    var middle = [(topDiamond[0][0] + topDiamond[1][0]) / 2,
                  (topDiamond[0][1] + topDiamond[1][1]) / 2];
    var size = [middle[0] - topDiamond[0][0], middle[1] - topDiamond[0][1]];

    function isInsideDiamond(middle, size)
    {
        var dx = Math.abs(coords[0] - middle[0]);
        var dy = Math.abs(coords[1] - middle[1]);
        return (dx / size[0] + dy / size[1] <= 1);             
    }

    if (isInsideDiamond(middle, size))
        return "top";
    if (isInsideDiamond([middle[0], middle[1] + size[1] * 2], size))
        return "bottom";
    if (isInsideDiamond([middle[0] - size[1], middle[1] + size[1]], size))
        return "left";
    if (isInsideDiamond([middle[0] + size[1], middle[1] + size[1]], size))
        return "right";

    return "none";
}