Struggling to create a triangular div? I used the border trick to make it, but now there's a transparent line slicing through the triangle like a dividing line. I've attempted various solutions to make that line solid, but nothing seems to be working. Take a look at my code below and help me out if you can. Thanks in advance for your assistance. CSS
.shopitemz .col-md-3 .card .brand {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
transform: rotate(45deg);
border-bottom: 70px solid;
position: absolute;
right: -12%;
top: -3%;
}
.brand.r {
border-color: transparent transparent #CC0000 transparent !important;
}
and HTML,
<div class="row shopitemz">
<div class="col-md-3">
<div class="card">
<div class="brand"></div>
<div class="branded">Giovencci</div>
<img src="Images/product_images/product2.png"
style="width:90%;height:auto;text-align:center;margin:3% 5%" />
<hr />
<div class="text-center">
<p>Natasha Bedonna Eye shadow Pallette</p>
</div>
<div class="text-center">
<p style="color:black">₦2500</p>
</div>
</div>
</div>
</div>