How to write text inside inverted-trapezoid (shape)?

Question

I want to know how to write text in inverted-trapezoid. I saw many solution that how to put text inside a trapezoid shape but haven't found a single code for inverted-trapezoid.

All I want is to put my text inside the inverted triangle:(

Thank you <3

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:trapezoid2 { width; 23px: height; 0px: border-top; 140px solid #20a3bf: border-left; 70px solid transparent: border-right; 70px solid transparent; } </style> </head> <body> <div class="trapezoid2 ">thanks</div> </body> </html>

Answer 1

If the similar question I shared in the comment doesn't help, here's another way with CSS pseudo classes. The caveat being the text is in the CSS instead of the div

 .trapezoid2 { width: 23px; height: 0px; border-top: 140px solid #20a3bf; border-left: 70px solid transparent; border-right: 70px solid transparent; }.trapezoid2::after { content: "Thanky"; display: block; position: relative; top: -100px; left: -10px; } /* Small devices (landscape phones, 576px and up) */ @media only screen and (min-width: 576px) {.trapezoid2 { border-top-color: red; } } /* Medium devices (tablets, 768px and up) */ @media only screen and (min-width: 768px) {.trapezoid2 { border-top-color: #bf2090; } } /* Large devices (desktops, 992px and up) */ @media only screen and (min-width: 992px) {.trapezoid2 { border-top-color: rebeccapurple; } } /* Extra large devices (large desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {.trapezoid2 { border-top-color: cyan; } }

 <div class="trapezoid2"></div>

How to write text inside inverted-trapezoid (shape)?

Question

1 answers

solution1
1 ACCPTED 2020-04-30 21:59:10

How to write text inside inverted-trapezoid (shape)?

Question

1 answers

solution1 1 ACCPTED 2020-04-30 21:59:10

solution1
1 ACCPTED 2020-04-30 21:59:10