css - Bootstrap 元素离开响应卡

Question

我有这个问题，我有两个并排的三 Angular 形。有一点缝隙，但是在调整大小时它们可以自由移动并且不会停留在卡内。

我该如何解决这个问题？

这是 JS fiddle :

https://jsfiddle.net/vnpoL6t0/

代码如下:

.uppertri{
      -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
    clip-path: polygon(100% 0, 0 0, 0 100%);
    width: 217px;
    height: 217px;
}
.lowertri{
      -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    width: 217px;
    height: 217px;
    position: absolute;
    left: 3rem;
    top: 1.7rem;
}

<div class="row">

        <div class="col-md-3 col-sm-6">
          <a class="wood" href="/get_wood/1">
          <div class="card">
            <!-- <div class="premium"></div> -->
            <div class="card-body" align="center">
                <img class="uppertri" src="https://loremflickr.com/320/240" alt="Logo">
                <img class="lowertri" src="https://loremflickr.com/320/240" alt="Logo">
            </div>
          </div>
          </a>
        </div>

        <div class="col-md-3 col-sm-6">
          <a class="wood" href="/get_wood/2">
          <div class="card">
            <!-- <div class="premium"></div> -->
            <div class="card-body" align="center">
                <img class="uppertri" src="https://loremflickr.com/320/240" alt="Logo">
                <img class="lowertri" src="https://loremflickr.com/320/240" alt="Logo">
            </div>
          </div>
          </a>
        </div>

      </div>

Answer 1

您需要删除fix height 和fix width 以便您可以在调整大小时缩放图像

您可以在 lowertri 中设置 right 而不是 left 并将 uppertri 设置为 left: 0 如果你愿意。这样两个三 Angular 形都在 div 内

.uppertri {
   -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
   clip-path: polygon(100% 0, 0 0, 0 100%);
   position: absolute;
   left: 0;
   top: 0;
   width: 50%;
 }
.lowertri {
   -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
   clip-path: polygon(100% 0, 0 100%, 100% 100%);
   position: absolute;
   right: 0;
   bottom: 0;
   width: 50%;
}
.card-body {
  min-height: 170px;
}