Элемент начальной загрузки, оставляющий отзывчивую карту

Question

У меня есть эта проблема, у меня есть два треугольника, которые должны быть рядом и иметь. небольшой зазор, однако при изменении размера они перемещаются свободно и не остаются внутри карты.

Как мне исправить это?

Вот скрипка JS:

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, чтобы можно было масштабировать изображения при изменении размера

, вы можете установить 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;
}