使一个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显示为一个三角形

回答

相关问题