Text outside an upside-down trapezium

[Yusifer]

I have a hopefully interesting problem here. Referring to this link: https://www.w3schools.com/code/tryit.asp?filename=FYA6DFOJF9GE

 

As you can see, the text in the left and right trapezium is where it should be, but the middle trapezium that's upside-down has its text under it. The only difference in css between the trapeziums is the border-bottom changed to border-top (hence causing it upside down), but is this the reason or is there more behind it?

 

What should I do to put the text right where it should be?

[Ingolme]

The reason is that the top border always goes above the content while the bottom border goes below it.

To do the upside-down trapezoid, it might be better to put the border on the ::before or ::after pseudo-element and position that inside its container behind the text.

[dsonesuk]

https://www.w3schools.com/code/tryit.asp?filename=FYAZTWRAPC5H

Edited December 18, 2018 by dsonesuk