Имеется интерактивная карта 1000px на 1000px. Имеется база данных в которой постоянно обновляются эти зоны в виде их крайних 4 точек и передаются в пикселях. Пример зоны:
Первая точка top:100px; left:100px;
Вторая точка top:-100px; left:-100px;
Третья точка top:200px; left:200px;
Четвертая точка top:-200px; left:-200px;
Получаем что-то вроде такого (извините что криво):
Собственно сам вопрос - как можно соединить в квадрат с заливкой эти точки? (через CSS, HTML)
Значения для точки 1 top и left задаются через тег {zone1_top} {zone1_left}
Для второй {zone2_top} {zone2_left} и так далее
Вот пример как выводится одна точка зоны (один ее край):
<div style="position:absolute; top:{zone1_top}px; left:{zone1_left}; background-color: red; width:16px; height:16px;"></div>
Жду помощи!