Finding the skewed offset of an element

I've a full width container, that has a before pseudo element that's 3/5's the width absolutely positioned, and skewed by 12 degrees. I'd like to place another element after it, so get the bounding rect coordinates and update a css-variable with the right value, which will be used as the left of the next element. I can't work out how to calculate/take into account how to adjust for the slant though Codepen: https://codepen.io/nwoodward/pen/JjBGbqW?editors=1111 Would appreciate any thoughts/approaches! Thanks See the red progress bar, and the 'x' distance:
2 Replies
StefanH
StefanH17mo ago
I wouldn't solve this with javascript. Try adding a clip-path to the image instead of overlaying a transformed div
JWode
JWode17mo ago
Yeah I probably should've done that, and also used grid, but left it this way because of an animation I'd like to try. Think I'll def go the clip-path method next time (although I've never messed with it) thanks