LinesOverlay Test/styles.css

#outerLinesContainer {
    width: 500px;
    height: 500px;
    position: relative;
    --lineWidth: 5;
}

.line {
    background-color: red;
    position: absolute;
    transform-origin: top left;

    left: calc(1px * calc((var(--x1) - var(--startX))));
    top: calc(1px * calc((var(--z1) - var(--startZ))));
    width: calc(1px * var(--lineWidth));
    
    --x: calc(var(--x1) - var(--x2));
    --z: calc(var(--z2) - var(--z1));

    --isNegative: clamp(0, calc(min(var(--z), 0) * -10000), 1); /*returns 1 if --z is negative and otherwise returns 1*/

	height: 30px; /*temporary placeholder*/
    /*height: calc(1px * sqrt(calc(((var(--x2) - var(--x1)) * (var(--x2) - var(--x1))) + ((var(--z2) - var(--z1)) * (var(--z2) - var(--z1))))));*/
    /*transform: rotate(calc( atan( (var(--x) / (var(--z) + 0.0000001)) ) + (var(--isNegative) * 180deg)));*/
}