我想让我的切边与盒子大小相匹配。我在很多情况下尝试了盒子大小,但无法使其正常工作。
.box {
background-color: #009fbd;
width: 100%;
}
.box p {
color: #fff;
}
.chipped-corner:before {
content: '';
position: absolute;
bottom: 5px;
left: 15px;
display: block;
height: 0;
width: 100%;
border-top: 7px solid #009fbd;
border-right: 7px solid transparent;
box-sizing: border-box;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-4 col-sm-3">
<div class="text-center chipped-corner">
<div class="box">
<div>
<p>Pulp Fiction</p>
<p>Best Movie Ever.</p>
</div>
</div>
</div>
</div>
类似的东西:
答案 0 :(得分:1)
问题不在于边框。问题在于您添加的bootstrap列类。
:before
元素的左侧位置重置为0. 这应该让你接近你正在寻找的东西。
答案 1 :(得分:1)
将relative
样式设置为相同的元素
.box {
background-color: #009fbd;
width: 100%;
}
.box p {
color: #fff;
}
.chipped-corner{
position: relative;
}
.chipped-corner:before {
content: '';
position: absolute;
left: 0;
bottom: -7px;
display: block;
height: 0;
width: 100%;
border-top: 7px solid red;
border-right: 7px solid transparent;
}
&#13;
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-4 col-sm-3">
<div class="text-center chipped-corner">
<div class="box">
<div>
<p>Pulp Fiction</p>
<p>Best Movie Ever.</p>
</div>
</div>
</div>
</div>
&#13;