bootstrap 4 css to show the yellow triangle containing text in bottom right of the card, is css the way?

Question

bootstrap 4 css to show the yellow triangle containing text in bottom right of the card, is css the way?

571 Views Asked by Pris At 22 November 2019 at 05:17

I am struggling to edit the CSS to show the yellow triangle containing text in the bottom right of a Bootstrap 4 card, in CSS, is there a way to achieve this effect?

This is what the css currently outputs in a Bootstrap 4 card:

And this is what I want to achieve:

.row {
  position: relative;
  min-height: 100px;
}

.triangle {
  display: block;
  width: 50px;
  height: 50px;
  font-size: 21px;
}

.triangle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to left top, #ffffff 49%, transparent 33%);
}

{
  position: relative;
  top: 5px;
  left: 5px;
}

<div class="card card-ecommerce">
  <a href="#" class="triangle btn-warning position-absolute">
               &nbsp;<i class="fas fa-arrow-left" aria-hidden="true"></i></a>
  <div class="view overlay">
    <img src="https://i.stack.imgur.com/B73k3.jpg" class="img-fluid" alt="sample image">
    <a>
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>
  <div class="card-body">
    <h5 class="card-title mb-1"><strong><a class="dark-grey-text">10% cashback</a> </strong></h5>
    <span class="badge badge-danger mb-2">bestseller</span>
    <div class="card-footer pb-0">
      <div class="row mb-0">

Original Q&A

There are 2 best solutions below

**Khalid Khan** · Answer 1 · 2019-11-22T06:57:22.633000

Try this code

I've created two triangle on both diagonal sides with text in it. Hopefully it'll help you.

.change_corner {
  width: 0;
  float: right;
  height: 0;
  border-top: 150px solid #ffcc00;
  border-right: 150px solid transparent;
  transform: rotate(180deg);
}

.change_corner span {
  position: absolute;
  top: -130px;
  width: 100px;
  left: 5px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(131deg);
  display: block;
}

.corner {
  width: 0;
  height: 0;
  border-top: 150px solid #ffcc00;
  border-bottom: 0px solid transparent;
  border-right: 150px solid transparent;
}

.corner span {
  position: absolute;
  top: 35px;
  width: 100px;
  left: 5px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(-45deg);
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Traingle Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class='container'>
    <div class="row">
      <div class="col-md-12">
        <div class="card mt-5">
          <div class="triangle">
            <div class="corner"><span>20% Special Offer</span></div>
          </div>
          <div class="mt-2 mb-2">
            This is my content
          </div>
          <div class="triangle">
            <div class="change_corner"><span>20% Special Offer</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

**AlexG** · Answer 2 · 2019-11-22T10:49:00.627000

Change the fa-arrow-left favicon class to fa-arrow-right, and if not existant add a class .triangle-right to your CSS (or LESS/SASS) and of course to your .triangle element:

.triangle-right {
    position: relative;
    bottom: 5px;
    right: 5px;
}

.triangle-right::after {
    content: "";
    background: linear-gradient(to right bottom, #ffffff 49%, transparent 33%);
}

Example Snippet:

// This class needs to be added, ideally with a similar name as the previous
.triangle-right {
  position: relative;
  bottom: 5px;
  right: 5px;
}

.triangle-right::after {
  content: "";
  background: linear-gradient(to right bottom, #ffffff 49%, transparent 33%);
}

.row {
  position: relative;
  min-height: 100px;
}

.triangle {
  display: block;
  width: 50px;
  height: 50px;
  font-size: 21px;
}

.triangle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to left top, #ffffff 49%, transparent 33%);
}

// classname missing?
{
  position: relative;
  top: 5px;
  left: 5px;
}

<div class="card card-ecommerce">
  <!-- triangle receives the .triangle-right class -->
  <a href="#" class="triangle btn-warning position-absolute triangle-right">
    <!-- change fa-arrow-left to fa-arrow-right -->
    &nbsp;<i class="fas fa-arrow-right" aria-hidden="true"></i>
  </a>
  <div class="view overlay">
    <img src="https://i.stack.imgur.com/B73k3.jpg" class="img-fluid" alt="sample image">
    <a>
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>
  <div class="card-body">
    <h5 class="card-title mb-1"><strong><a class="dark-grey-text">10% cashback</a> </strong></h5>
    <span class="badge badge-danger mb-2">bestseller</span>
    <div class="card-footer pb-0">
      <div class="row mb-0">
      </div>
    </div>
  </div>
</div>

bootstrap 4 css to show the yellow triangle containing text in bottom right of the card, is css the way?

There are 2 best solutions below

Related Questions in CSS

Related Questions in BOOTSTRAP-4

Trending Questions

Popular # Hahtags

Popular Questions