csswg-drafts | CSS Working Group Editor Drafts

I would like to use CSS animations to move an SVG along a linear path across a full-window page with aligning the SVG to this path. Referring to the figure below with the path shown as a red line, I want to specify h in multiples of vh and w in multiples of vw, e.g. h = 30vh, w = 60vw, and calculate the angle α for rotating the SVG shown as the blue triangle.

Or course, this should be responsive and work with different window sizes. I was hoping to do all this in pure CSS.

Following tan(α) = w/h, I can use the arcus tangens function to calculate the angle α from the quotient w/h. Since trigonometric function are not available in CSS yet, I could use a series approximation for calculating the angle as demonstrated here. But the actual show-stopper seems to be the calculation of the quotient w/h as divisions in CSS require the denominator to be unitless. So, 60vw / 30vh is not allowed.

Is there a different way to calculate or set the angle in CSS? Or do I have to fall back to a JavaScript solution here?

Edit: Here is a minimal reproducible example. In order to set the rotation in the first keyframe, the actual angle α would be required. It is currently fixed to rotate(0deg) so the triangle always points upwards instead in the direction of the linear path.

I'd like to have overflow working inside row that is spanned and another being collapsed.

Right now the text is clipped, but when the row is uncollapsed - overflow works. I tried position: absolute and it works...until you start scrolling. If I start putting position: relative anywhere the text becomes clipped again.

I searched for any hints but I found that this is how Webkit implemented it apparently: https://github.com/w3c/csswg-drafts/issues/478#issuecomment-318539983 There is no problem on Firefox, only on Webkit browsers.