Can Bootstrap 4 CSS be used to display a yellow triangle with text in the bottom right corner of a card?

I'm having difficulty modifying the CSS to display a yellow triangle containing text in the bottom right corner of a Bootstrap 4 card. Is there a way to achieve this effect using CSS?

This is how the current CSS output looks in a Bootstrap 4 card:

https://i.sstatic.net/QWLiT.jpg

Here is the desired outcome I want to achieve:

https://i.sstatic.net/qPaDd.jpg

.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.sstatic.net/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">

cssbootstrap-4

Answer №1

Give this code a try

I have designed two triangles on the opposite diagonal sides with text inside. Hopefully, this will be useful to 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>

Answer №2

Modify the fa-arrow-left favicon class to fa-arrow-right, and if it does not already exist, include a class .triangle-right in your CSS (or LESS/SASS) as well as in 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 should be appended, preferably with a similar name to the existing one
.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%);
}

// missing classname?
{
  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">
    <!-- replace fa-arrow-left with fa-arrow-right -->
    &nbsp;<i class="fas fa-arrow-right" aria-hidden="true"></i>
  </a>
  <div class="view overlay">
    <img src="https://i.sstatic.net/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why won't my HTML/CSS/JavaScript modal pop up in front of everything else?

Attempting to create my own modal in JSFiddle has been an interesting challenge for me. Once I had something that worked, I tried implementing it on my website. Unfortunately, the modal appears behind other elements on the page. What could be causing this ...

javascriptjqueryhtmlcss

`As the Screen Shrinks, Bootstrap 4 Jumbotron Text and Button Elements Fail to Resize Appropriately`

My current project involves using Bootstrap 4's Jumbotron to enhance the design of a landing page. Within the jumbotron, I have added standard headings and paragraphs along with two call-to-action buttons. To ensure proper positioning on desktop scree ...

htmlcssbootstrap-4

I'm noticing that when I activate fullscreen mode on my web browser, the images are getting zoomed in

Can anyone help me with an issue I am facing while working on a school project website? The problem is that when I enable fullscreen mode, the photos on my website become larger than intended. For reference, here is how it looks in NOT FULLSCREEN: And he ...

htmlcsswebfrontendweb-frontend

HTML - maintain centered text positioning while implementing padding on the left side

Here are the HTML and CSS code snippets I am working with: #page { background-color: #000; color: #fff; height: 360px; width: 360px; min-height: 100%; } #viewport { font-size: 20pt; text-align: center; } .taskTitle { height: 13%; fon ...

htmlcsslayoutstyles

Can you explain the steps to implement this feature in a modal window using jQuery?

My HTML list contains a bunch of li elements. ul li img .det li I am looking to create a modal popup that appears when I click on something. I want this modal popup to have previous and next buttons, preferably implemented using jQuery. I have alr ...

javascripthtmlcss

Adjust the CSS styling for a newly added row in a JavaFX TableView

Apologies for any errors, I am French. I am currently facing an issue with an empty tableView in my project. There is a button labeled "Add" that adds a row to the tableView when clicked. Another button labeled "Cancel" appears when a row in the tableView ...

cssjavafxtableview

After 30 seconds of inactivity, apply the CSS once, then remove it before repeating the process

I've got a unique little CodePen with an animation that I want to execute only if the user hasn't clicked on the <div class="someDiv"> for 30 seconds. My question is, can someone guide me in the right direction so that when someone doesn&a ...

javascriptjquerycss

Using Bootstrap 4 to line up divs horizontally at the top edge

I am working on aligning an image and a div inline while ensuring that the tops of both elements are aligned as well. This is my current code snippet: <div> <img src="http://lorempixel.com/500/333/nature/2" class="img-fluid d-inline-block"> &l ...

csstwitter-bootstrapbootstrap-4

Is there a way to modify the background of a div when a specific field within my component is true and the div is being hovered over?

When I hover over a div, I want the background color to change. Additionally, I need the color choice to be based on an element within my component. <div *ngFor="let u of users;" [style:hover.background-color] = "u.selected ? 'red ...

htmlcssangular

Tips for reducing a table to fit the dimensions of a mobile device

My Bootstrap table design looks great on larger screens like laptops, monitors, and tablets, but the size isn't optimized for phones. I've tried adjusting the width in percentages and pixels, but it's not working out. Any suggestions on how ...

htmlcssbootstrap-5

Sticky-top Navbar in Angular5 and Bootstrap4

The "sticky-top" Bootstrap navbar position only functions if the navbar is a direct child of: <body> <header class="sticky-top"> <nav class="navbar navbar-light bg-light p-0"> ... </nav> </header> </bod ...

angularbootstrap-4

Enhance the user experience by adding visual appeal to the first option in the selection form. Make it

Is there a way to change the color of the first option in the selection box to grey, similar to the example above? Additionally, how can I create a clickable icon that will display all options? The current setup is not functioning correctly. <div clas ...

htmlcssformsfont-awesome

A different way to add a child element in JavaScript without using

Is there a way to insert a node as a child element at position 0, replacing any existing child nodes rather than appending? What function can I use to ensure cross-browser compatibility for this operation? ...

javascripthtmlcssdom

Insert a picture within the text input field

I'm facing a specific scenario where I need to add text followed by an image, then more text followed by another image and so on. Please see the input text with values in the image below. Can someone guide me on how to accomplish this with jQuery and ...

javascriptjqueryhtmlcss

Various instances of the jQuery niceScroll plugin

I successfully set up jQuery niceScroll on the body, but now I want different themed scrollbars on one page. Below is my code snippet: Here is my fiddle: http://jsfiddle.net/JPA4R/135/ <script> $(document).ready(function () { $("body").niceScroll ...

jqueryhtmlcssscroll

Position the floated navigation bar in the center and have the dropdown menu appear from left to right

In order to center align the content in the nav bar and keep the float left property without causing any issues, consider using display: inline-block. Additionally, you may want the dropdown bar for the left thing to start at the image's left side and ...

htmlcssnavbar

Including local directories in the Laravel header

I am struggling to properly integrate a custom Bootstrap folder and CSS into my Laravel index. Despite several attempts, I have not been successful. Any guidance on how to accomplish this would be greatly appreciated. I have placed the necessary folders i ...

phplaravellaravel-5bootstrap-4

Creating a div resizing function using only JavaScript is a fun and useful project to tackle

Seeking help to create a div resizer using only pure JavaScript as jQuery is restricted. The current functionality works, but breaks when the position of the slider-div is not set to absolute. Any solutions to fix this issue would be greatly appreciated. ...

javascripthtmlcss

Align several labels and text areas in the center

I am facing an issue with aligning multiple labels and textareas together. Currently, they line up like this: __________________ | | | | Label:|__________________| However, I want them to appear as fol ...

htmlcss

Unstyled Cards Failing to Receive Design

I am currently working on creating a prototype that utilizes two Bootstrap 4 cards to display information from a form and store related information from another form in the second card. The current layout of this setup can be observed below: https://i.sst ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-4