Text appears under div with viewport sizing instead of inside div

Question

This is my css:

.triangle-topright {
       width: 0;
       height: 0;
       border-style: solid;
       border-width: 100vh 20vw 0vw 50vw;
       border-color: rgba(255,255,255,0.5) rgba(255,255,255,0.5) rgba(255,255,255,0.5) transparent;
       position: relative;
       float: right;
}

Here is my html:

<div class="triangle-topright" >
      <h1>here</h1>
</div>

"here" appears under the div, but I want it to appear in the div, let's say in the middle, or wherever I choose. Help!

Answer 1

The div is height: 0;, so nothing can really appear "in" it. However, you're building a CSS triangle, so to heck with convention!

If you're saying you want the h1 to appear in the middle of the div's top border, you could add this style rule and adjust the top property as necessary:

.triangle-topright h1 {
  position: absolute; // Works because .triangle-topright is position: relative
  top: -50vh; // Half of your vertical border space
  line-height: 1rem; // Make sure line height is predictable
  margin-top: -.5rem; // Center element on its Y axis (assuming only one line of text is involved)
  // You might need to zero out some margins or padding to achieve your desired result
}