如何解决将偏移形状设置为标题的背景
基本上我想要一个标题,然后在它后面有一个偏移的正方形。我试图通过将我的正方形绝对定位然后放在标题后面来做到这一点,但是当我调整页面大小时,它会偏离位置。
我正在尝试实现图像示例中标题后面的形状。
我尝试了什么:
.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
解决方法
移动文本 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。