边框不工作

时间:2017-05-12 17:27:14

标签: css

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

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

类似的东西:

enter image description here

2 个答案:

答案 0 :(得分:1)

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

  1. 它需要移除15px的填充物。
  2. 您需要将:before元素的左侧位置重置为0.
  3. 这应该让你接近你正在寻找的东西。

答案 1 :(得分:1)

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;