Jump to content

Text outside an upside-down trapezium

Recommended Posts

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?

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now