文本显示在 div 下，视口大小而不是在 div 内

Question

这是我的 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;
}

这是我的 html:

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

"here" 出现在 div 下，但我希望它出现在 div 中，比方说在中间，或者我选择的任何位置。求助！

Answer 1

的div是height: 0;，所以什么都可以真正出现"in"呢。但是，您正在构建一个 CSS 三角形，所以见鬼去吧！

如果您想要 h1 出现在 div 的上边框中间，您可以添加此样式规则并调整 top 属性根据需要：

.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
}

文本显示在 div 下，视口大小而不是在 div 内

Text appears under div with viewport sizing instead of inside div

html

css

viewport-units