HTML 代码:
<div class="pricing_plan ultimate">
<div class="strap">
<P>RECOMMENDED</P>
</div>
<div class="p_name">
<p>Ultimate</p>
</div>
<div class="p_plan">
<p><strike>₹ 2388</strike></p>
<h3>₹ 1,099</h3>
<p>Save 53%</p>
</div>
<div class="p_duration">
<p>12 Months</p>
<p>356 Days</p>
</div>
<a href="">
<button class="pricing_button ultimate">BUY</button>
</a>
</div>
CSS
.s2 .pricing_plans .ultimate .strap{
position: relative;
top: -13px;
right: 65px;
transform: rotate(-35deg);
clip-path: inset(0px 50px 50px 0px);
}
.s2 .pricing_plans .ultimate .strap p{
background-color: white;
font-size: 10px;
color: #3499E0;
padding-left: 20px;
padding-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
如何将其夹入矩形中,使其不会流到外面。
我已经尝试过 overflow:hidden
它似乎不起作用。
最好的方法是什么,这样它最适合响应式设计?
最佳答案
您必须对父 block 使用 position:relative
,对子 block 使用 position:absolute
:
.bloc{
background: red;
position: relative;
overflow: hidden;
width: 200px;
height: 300px;
}
.bloc .label{
position: absolute;
top: 15px;
left: -20px;
width: 120px;
height: 20px;
background: black;
color: #fff;
text-align: center;
transform: rotate(-35deg);
}
<div class="bloc">
<div class="label">
Label here
</div>
</div>
关于css - div根据父矩形剪切路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54978052/