CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Eric McWinNEr
Eric McWinNEr

Reputation: 533

Making a div appear as a triangle

I'm trying to make a triangular div. Well, actually I've created the div making use of the border trick. The issue I'm having is there is a transparent line running in the middle of the triangle. It's like a perpendicular line dividing the right angle into two equal triangles. I've tried everything to make the transparent line opaque div but it's not working. Here's my code. Thanks in advance for helping me fix this bug. 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">&#8358;2500</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 804

Answers (1)

slashsharp
slashsharp

Reputation: 2833

Add

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>

Upvotes: 1

Related Questions