将偏移形状设置为标题的背景

Question

基本上我想要一个标题，然后在它后面有一个正方形，即偏移量。我试图通过绝对定位我的方块然后放在标题后面来做到这一点，但是当我调整页面大小时它会偏离位置。

我正在尝试实现图像示例中标题后面的形状。

我尝试了什么：

.shape {
  position: absolute;
  width: auto;
  height: 30px;
  min-height: 30px;
  min-width: 30px;
  border-radius: 10px;
  background-color: rgb(25, 94, 76);
  top: 43vh;
  left: 28vw;
  z-index: -1;
}

.center {
  position: absolute;
  left: 50%;  /*Half width*/
  top: 50%;  /*Half height*/                 translateY(-50%);  
  -webkit-transform: translateX(-50%)   
                     translateY(-50%);  
  padding: 20px;
  font-size: 1rem;
}

<div class="center">
  Resize the page to see the shape go off center
</div>

<div class="shape"></div>

这是一个代码笔：https://codepen.io/PhoenixBeatsYT/pen/XWjZLgB

Answer 1

将形状 移动到 您的文本 div 然后调整到顶部和左侧。

可能需要稍作调整才能完美对齐。

.shape {
  position: absolute;
  width: auto;
  height: 30px;
  min-height: 30px;
  min-width: 30px;
  border-radius: 10px;
  background-color: rgb(25, 94, 76);
  z-index: -1;
  top: 0;
  left: 0;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  font-size: 1rem;
}

<div class="center">
  Resize the page to see the shape go off center
  <div class="shape"></div>
</div>

将偏移形状设置为标题的背景

Set offset shape as background on title

html

css

css-position

flexbox