边框不工作

Question

我想让我的切边与盒子大小相匹配。我在很多情况下尝试了盒子大小，但无法使其正常工作。

.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>

类似的东西：

Answer 1

问题不在于边框。问题在于您添加的bootstrap列类。

1. 它需要移除15px的填充物。
2. 您需要将:before元素的左侧位置重置为0.

这应该让你接近你正在寻找的东西。

Answer 2

将relative样式设置为相同的元素

＆＃13;

＆＃13;

.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;

＆＃13;

＆＃13;