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

【问题标题】：Set offset shape as background on title将偏移形状设置为标题的背景
【发布时间】：2021-04-08 10:49:30
【问题描述】：

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

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

我尝试了什么：

.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

【问题讨论】：

标签： html css flexbox css-position

【解决方案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>

【讨论】：