Hello lovely people, I'm currently facing an issue with two triangles that are supposed to be next to each other with a small gap in between. However, when I resize the screen, they start moving freely and don't stay within the designated card area.
Any ideas on how I can solve this problem?
Here's the link to the JS Fiddle for reference:
https://jsfiddle.net/vnpoL6t0/
Below is the snippet of the code causing the glitch:
.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="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="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>