|
|
| Line 4: |
Line 4: |
| height: 500px; | | height: 500px; |
| position: relative; | | position: relative; |
| --lineWidth: 5;
| |
| } | | } |
|
| |
|
| Line 11: |
Line 10: |
| position: absolute; | | position: absolute; |
| transform-origin: top left; | | 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)));*/
| |
| } | | } |
