Creating a triangle connecting a div and a point on an image
I'm trying to sort out the best way to create the lower opacity triangles you see that connect the boxes with the names of the deltas on the left with their locations on the right. The solution only needs to work on larger viewports (once the elements stack the triangles aren't necessary).
My default idea is finding a way to get three points with JS (top and bottom right of the box and then a rough estimation of the point on the map), then create a shape from those three points (somehow). I feel like there might be a way to do it with pseudo elements, but I'm not sure that's actually possible. What's the right approach here?
If it matters, it's setup using grid, and it goes 1 (white boxes), 2 (map), 3 (colored boxes) so that it will stack in the right order on narrower viewports.
My default idea is finding a way to get three points with JS (top and bottom right of the box and then a rough estimation of the point on the map), then create a shape from those three points (somehow). I feel like there might be a way to do it with pseudo elements, but I'm not sure that's actually possible. What's the right approach here?
If it matters, it's setup using grid, and it goes 1 (white boxes), 2 (map), 3 (colored boxes) so that it will stack in the right order on narrower viewports.
