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
I wouldn't solve this with javascript. Try adding a clip-path to the image instead of overlaying a transformed div
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