使一個div顯示爲一個三角形

我正在嘗試製作一個三角形的div。那麼，實際上我已經創建了利用邊框技巧的div。我遇到的問題是在三角形中間有一條透明線。這就像一個垂直線將直角分成兩個相等的三角形。我試過一切，使透明線不透明的div，但它不工作。這是我的代碼。預先感謝幫助我解決這個錯誤。 CSS使一個div顯示爲一個三角形

.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; 
}

和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>

來源

2017-01-02 Eric McWinNEr

我沒有看到任何垂直線，看起來很清潔T字o我（Chrome） – casraf

我使用mozilla firefox開發者版 –

添加

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>

來源

2017-01-02 17:35:04 slashsharp

哇。這解決了我的問題。非常感謝。 –

使一個div顯示爲一個三角形

回答

相關問題