Yusifer Posted December 17, 2018 Share Posted December 17, 2018 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? Link to comment Share on other sites More sharing options...
Ingolme Posted December 17, 2018 Share Posted December 17, 2018 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 18, 2018 Share Posted December 18, 2018 (edited) https://www.w3schools.com/code/tryit.asp?filename=FYAZTWRAPC5H Edited December 18, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now