Discovering the point of intersection between two triangularly-styled DIVs is not supported by the jQuery API.
To uncover the "red intersecting triangle," you must turn to mathematics:
Step I: Identifying the vertex points of the red polygon
- Determine the 3 vertex points of both triangular divs.
- Use the #1 points from each triangle to identify the 3 line segments composing the sides of the triangles.
- Locate any intersection points between each line segment of triangle-A and triangle-B. Refer to the function below for guidance on finding these intersections.
If you locate precisely 3 intersection points in #3 above, it indicates that the original triangles intersect, forming a new triangle -- proceed to Step II...
Step II: Constructing a triangle polygon from the 3 intersection points found in Step I
Determine the central point of your new triangle. This can be calculated as the average of its x and y coordinates:
centerX = (vertex1.x + vertex2.x + vertex3.x)/3
and centerY = (vertex1.y + vertex2.y + vertex3.y)/3
Compute all angles from the centerpoint to each user's point utilizing
Math.atan2( (vertex1.y-centerY), (vertex1.x-centerX) )
... doing likewise for vertex2 & vertex3.Arrange the points in ascending order based on the angles calculated in #2.
This trio of points forms the vertices of your red triangle.
Step III: Designing a new red div shaped like a triangle employing the vertices from Step II
Tools
Here is a Javascript function that determines the intersection of 2 line segments (if applicable):
// Obtain intersection point of 2 line segments (if any)
// Credit: http://paulbourke.net/geometry/pointlineplane/
function line2lineIntersection(p0,p1,p2,p3) {
var unknownA = (p3.x-p2.x) * (p0.y-p2.y) - (p3.y-p2.y) * (p0.x-p2.x);
var unknownB = (p1.x-p0.x) * (p0.y-p2.y) - (p1.y-p0.y) * (p0.x-p2.x);
var denominator = (p3.y-p2.y) * (p1.x-p0.x) - (p3.x-p2.x) * (p1.y-p0.y);
// Examine if Coincident
// If the numerator and denominator for ua and ub are 0
// then the lines coincide.
if(unknownA==0 && unknownB==0 && denominator==0){return(null);}
// Check for Parallel Lines
// If the denominator for ua and ub equations is 0
// then the lines are parallel.
if (denominator == 0) return null;
// To ascertain the intersection of line segments
// evaluate whether ua and ub fall between 0 and 1.
// Whichever lies within that range implies the corresponding
// line segment contains the intersection point.
// If both lie within the range of 0 to 1
// the intersection point resides within both line segments.
unknownA /= denominator;
unknownB /= denominator;
var isIntersecting=(unknownA>=0 && unknownA<=1 && unknownB>=0 && unknownB<=1)
if(!isIntersecting){return(null);}
return({
x: p0.x + unknownA * (p1.x-p0.x),
y: p0.y + unknownA * (p1.y-p0.y)
});
}