如何解决如何使对角div响应?
我有一个定价表,其中包含一个对角徽章,如下图所示。定价表是响应式的,徽章也是如此。但是,当我缩小定价表时,徽章的右侧与父div
“分离”(请参见下图)。我关注了this code,但我无法说出我的缺失。
.card-premium-category {
background: blue;
border-radius: 100%;
border: 4px solid white;
width: 85px;
height: 85px;
text-align: center;
position: absolute;
margin: auto;
top: -9%;
right: 0;
left: 0;
}
.card-premium-header {
height: 128px;
border-radius: 4px 4px 0px 0px;
width: 100%;
margin: 0 auto;
}
.background-gradient-with-frog {
background: red;
background-size: 54% auto,cover;
background-position: 115% 23%;
}
.box {
position: relative;
max-width: 600px;
width: 90%;
background: #fff;
box-shadow: 0 0 15px rgba(0,.1);
}
.ribbon {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
}
.ribbon span {
position: absolute;
display: block;
width: 268px;
padding: 4px 0;
background-color: white;
color: #495057;
font-size: 0.8em;
text-align: center;
font-weight: 400;
}
.ribbon-top-right {
top: 0;
right: -31px;
}
.ribbon-top-right span {
left: -25px;
top: 30px;
transform: rotate(45deg);
}
<div class="d-flex flex-row justify-content-around text-center">
<div class="premium-cards-wrapper col-12 mt-4">
<!-- PRICING TABLE -->
<div class="card-premium-container col-11 col-xs-11 col-sm-11 col-md-3
col-lg-3 mx-auto text-center space-right-left recommended">
<div class="card-premium-category">
<img src="#" class="super-reebit">
</div>
<div class="card-premium-body">
<div class="box">
<div class="ribbon ribbon-top-right"><span>Recomendado</span>
</div>
</div>
<div class="card-premium-header background-gradient-with-frog">
</div>
</div>
</div>
<!-- /PRICING TABLE -->
</div>
</div>
这是我的codepen。
这是我需要实现的:
这是我的问题:
解决方法
您是否将.box宽度设置为90%的任何特殊原因?我将您的Codepen中的.box宽度更改为100%,看起来还可以。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。