Ein Div als ein Dreieck erscheinen lassen

Question

Ich versuche, ein dreieckiges div zu machen. Nun, eigentlich habe ich das Div erstellt, das den Randtrick nutzt. Das Problem, das ich habe, ist eine transparente Linie in der Mitte des Dreiecks. Es ist wie eine senkrechte Linie, die den rechten Winkel in zwei gleiche Dreiecke teilt. Ich habe alles versucht, um die transparente Linie undurchsichtig div zu machen, aber es funktioniert nicht. Hier ist mein Code. Vielen Dank im Voraus, dass Sie mir geholfen haben, diesen Fehler zu beheben. 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; 
} 

und 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">&#8358;2500</p> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

hinzufügen

transform-style: preserve-3d; 

.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%; 
 
    transform-style: preserve-3d; 
 
} 
 
.brand.r { 
 
    border-color: transparent transparent #CC0000 transparent !important; 
 
}

<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">&#8358;2500</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>