JSFiddle - React, Tailwind, and code Playground

by Nickolay Ilchenko

HTML

Кликните на любое место, чтобы получить координаты относительно окна.
<br>Это для удобства тестирования, чтобы проверить результат, который вы получите из DOM.
<br>
<div id="coords">(координаты появятся тут)</div>
<div id="field">. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .</div>
<div class="triangle-right" style="left:-20px;top:-176px">1</div>
<div class="triangle-right" style="left:-10px;top:-178px">2</div>
<div class="triangle-right" style="left:190px;top:-40px">3</div>
<div class="triangle-right" style="left:200px;top:-42px">4</div>

CSS

body {
    padding: 20px;
    cursor: pointer;
}
#field {
    overflow: hidden;
    width: 200px;
    height: 150px;
    border-top: 10px solid black;
    border-right: 10px solid gray;
    border-bottom: 10px solid gray;
    border-left: 10px solid black;
    background-color: #00FF00;
    font: 10px/1.2 monospace;
}
.triangle-right {
    position: relative;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 20px solid red;
    text-indent: -20px;
    font: 12px/1 monospace;
}

JavaScript

// ===== Хелпер для проверки =====
document.onclick = function (e) { // выводит текущие координаты при клике
    e = e || event;
    document.getElementById('coords').innerHTML = e.clientX + ':' + e.clientY;
};

// ===== Мой код =====
var field = document.getElementById('field');
var point1, point2, point3, point4;
var fieldCoordinates = field.getBoundingClientRect();
var fieldCoordinatesLeft = field.getBoundingClientRect().left;
var fieldCoordinatesTop = field.getBoundingClientRect().top;
console.log('point1, left: ' + fieldCoordinatesLeft + ', right: ' + fieldCoordinatesTop);
console.log('point2, left: ' + (fieldCoordinatesLeft + parseInt(getComputedStyle(field, '').borderLeft, 10)));