Unskewed child not aligning

Question

Note: This question is about a problem with output, and not about creation of any shape.

---

I recently created a shape :

Answer 1

I will just address to the main issue, as to why it happens, instead of trying to provide alternatives

Since your math appears to be exact, we have to search for what is not exact, which is the platform itself...

MDN's article on transform states that it is not a stable technology:

This is an experimental technology
Because this technology's specification has not stabilized, check the

(emphasis mine)

Consider the following:

When you skew the main div, it requires a huge amount of browser render calculations to show in a 2D environment what it would look like considering both 3 axis... The pseudo element suffer with those calculations, as you can see if you further it a little left from the edge where you've put it:

See that I just moved to the left, and that caused it to go down a little, according to the Y skewing applied to the main div. Now, add to that another huge amount of calculations when you re-skew the pseudo element... The browser will just fail to provide an accurate render of what the 3D space would look like in a 2D environment...