Question

我有这个问题，我有两个并排的三角形并且有。有点差距，但是在调整大小时，它们会自由移动，不会留在卡内。

我将如何解决这个问题？

继承人JS小提琴：

下面是代码：

.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，以便在调整大小时缩放图片

如果您愿意，可以在right中设置left而不是lowertri，并将uppertri设置为left: 0。这样两个三角形都留在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;
}

Bootstrap元素离开响应卡

1 个答案: