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>

＆＃34;此处＆＃34;出现在div下面，但是我希望它出现在div中，让我们在中间说，或者在我选择的任何地方。救命啊！

Answer 1

div为height: 0;，因此没有任何内容可以真正出现＆＃34;＆＃34;它。但是，你正在构建一个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

1 个答案: