Ribbon with slanted angle displayed on top of an image using

I am working on creating an angled cornered ribbon to overlay on images. In the screenshot below, you can see that I want to display a "Sold" ribbon on items that have been sold.

https://i.sstatic.net/EgZax.png

I have shared a link to the codepen where I have showcased the items using bootstrap 4. I have managed to display the SOLD ribbon, but it is appearing at the top of the screen rather than over the images/items. I would greatly appreciate it if someone could assist me in positioning the SOLD ribbon correctly. Please note that I have limited experience with CSS.

Codepen: https://codepen.io/stephen0roper/pen/pQbjbq

Below is a snippet of the code I have used to display the ribbon:

/* The ribbons */

.corner-ribbon {
  font-weight: bold;
  width: 200px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 100px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}


/* Custom styles */

.corner-ribbon.sticky {
  position: fixed;
}

.corner-ribbon.shadow {
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}


/* Different positions */

.corner-ribbon.top-left {
  top: -10px;
  left: -103px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  background-color: red;
  width: 256px;
  height: 75px;
}

Answer №1

Using position: fixed; instead of absolute for .corner-ribbon is causing the issue. You also need to include overflow: hidden; for the .card class. Below is a corrected example:

/* Ribbon Styling */
.corner-ribbon{
  font-weight: bold;
  width: 200px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 100px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.card {
  overflow: hidden;
}

.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

/* Different Ribbon Positions */

.corner-ribbon.top-left{
    top: -10px;
    left: -103px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    background-color: red;
    width: 256px;
    height: 75px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
  <header>
      <div class="collapse bg-dark" id="navbarHeader">
        <div class="container">
          <div class="row">
            <div class="col-sm-8 col-md-7 py-4">
              <h4 class="text-white">About</h4>
              <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
            </div>
            <div class="col-sm-4 offset-md-1 py-4">
              <h4 class="text-white">Contact</h4>
              <ul class="list-unstyled">
                <li><a href="#" class="text-white">Follow on Twitter</a></li>
                <li><a href="#" class="text-white">Like on Facebook</a></li>
                <li><a href="#" class="text-white">Email me</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="navbar navbar-dark bg-dark shadow-sm">
        <div class="container d-flex justify-content-between">
          <a href="#" class="navbar-brand d-flex align-items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
            <strong>Album</strong>
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
    </header>

    <main role="main">
      <div class="album py-5 bg-light">
        <div class="container">

          <div class="row">
            <div class="col-md-4">
              <div class="card mb-4 shadow-sm">
                <div class="corner-ribbon top-left shadow">SOLD</div>
                <img class="card-img-top" src="http://dummyimage.com/400x400/000/fff?text=Item1" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                    </div>
                    <small class="text-muted">9 mins</small>
                  </div>
                </div>
              </div>
            </div>
            <!-- additional card elements -->
          </div>
        </div>
      </div>

    </main>

    <footer class="text-muted">
      <div class="container">
        <p class="float-right">
          <a href="#">Back to top</a>
        </p>
        <p>Album example is © Bootstrap, but feel free to download and customize it as needed!</p>
        <p>New to Bootstrap? <a href="../../">Visit the homepage</a> or check out our <a href="../../getting-started/">getting started guide</a>.</p>
      </div>
    </footer>

Answer №2

Take out the code

.corner-ribbon.sticky {position: fixed;}

The desired positioning for each corner ribbon is absolute, calculated from their closest positioned ancestor. This is achieved with absolute positioning.

position: fixed; calculates the position from the viewport, which is not the intended behavior in this case.

Include .card {overflow: hidden;}

/* The ribbons */

.corner-ribbon {
  font-weight: bold;
  width: 200px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 100px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}


/* Custom styles */

.corner-ribbon.shadow {
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}


/* Different positions */

.corner-ribbon.top-left {
  top: -10px;
  left: -103px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  background-color: red;
  width: 256px;
  height: 75px;
}

.card {
  overflow: hidden;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main role="main">
  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row">
        <div class="col-md-4">
          <div class="card mb-4 shadow-sm">
            <div class="corner-ribbon top-left sticky shadow">SOLD</div>
            <img class="card-img-top" src="http://dummyimage.com/400x400/000/fff?text=Item1" alt="Card image cap">
            <div class="card-body">
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                </div>
                <small class="text-muted">9 mins</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

Answer №3

hello, I have the perfect solution for creating a ribbon corner on an image:

CSS:

.corner {
 width: 0; 
height: 0; 
border-top: 120px solid #ffc107;
border-right: 120px solid transparent;
position:absolute;
left:27px;
top:12px;
}
.corner span {
 position:relative;
 top: -99px;
 left: 31px;
 text-align: center;
 font-size: 13px;
 font-family: arial;
 transform: rotate(-45deg);
 font-weight:600;
 display:block;
 }

HTML:

 <div class="row">
  <div class="col-sm-12">
    <div class="col-sm-3">
      <div class="thumbnail">
        <div class="corner"><span>20% Special Offer</span></div>
         <a href="#">
          <img style="height:200px;width:250px;" src="SAMPLE.PNG " > 
       </a> 
      <div class="caption text-center">
       <h5 class="cus"> sample ji </h5>
      </div>
    </div>
 </div>
 </div>

Answer №4

It is essential to include position:relative; in the .corner-ribbon parent class: .card

Furthermore, the .corner-ribbon class must have position:absolute; instead of position:fixed;

If you want to learn how to create a triangle using CSS, refer to How do CSS triangles work?

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

Saving the content of a div as a PDF

There are several aspects to consider when it comes to this question, but I'm having trouble finding the information I need. Hopefully someone can provide an answer. Essentially, what I want to achieve is: Imagine a div that is 400 X 400 px in size. ...

What are the steps to clear a client's local cache after updating my website?

Is there a simple way to clear the cache of all players who have previously played my game? The game stats are stored in local storage, and some players experienced bugs when the stats were incorrect. This outdated data is now affecting the updated stats ...

What is the best way to include basic static files and HTML together in a NodeJS environment?

I am facing an issue trying to serve an HTML file with its CSS and JS files in NodeJS using express.static(), but unfortunately, it is not working as expected. I have followed the steps shown in several tutorials, but for some reason, the output is not co ...

Implementing a confirmation dialog for POST requests in Flask

My first experience with Flask involves adding a confirmation dialog to a form, but only under specific conditions. Unfortunately, I'm unable to achieve this on the client side. While I was successful in implementing it for GET requests, POST requests ...

Dynamic row additions causing vanishing rows in the table due to JS/jQuery implementation

I am currently facing an issue while trying to create a table where I can add rows dynamically. Despite looking at various solutions on this topic, none of them seem to resolve the problem I am encountering. The newly added rows disappear immediately after ...

What is the best way to add a border to the <map coordinates>?

Is there a way to add a border around the active link section of an image defined by coordinates? I have been able to show an outline when the user clicks using outline-color and href, but now I need a default border around the specified coordinates. I am ...

Is there a way to use jquery and ajax to swap out an image on a webpage when a button is clicked?

I am trying to create a button on my HTML page that, when clicked, will asynchronously change a specific image on the page. Here's what I have so far: <a href="/test/page"> button </a> What I want is for the button click to change this i ...

The scrolltop function is dysfunctional on CentOS operating systems

I'm currently working on implementing smooth scrolling functionality when a button is clicked. The feature works perfectly fine with a local Apache server and IE10+, but when the project is deployed on "CentOS", it doesn't work on the same browse ...

The hover effect and image opacity adjustment seem to be malfunctioning in my HTML/CSS code

Currently, I am in the midst of a web project and my goal is to implement a hover effect on the first card containing an image. The desired outcome is for the card to move upwards upon hovering, allowing the image to become fully visible with an opacity se ...

Angular causes HTML Dropdown to vanish once a null value is assigned

In my scenario, I have two variables named power and mainPower. Both of these variables essentially represent the same concept, with mainPower storing an ID of type Long in the backend, while power contains all attributes of this data transfer object. The ...

Guide to creating animated sections using only CSS as you scroll the webpage

I am searching for a method to add animation effects (using @keyframes, transform...) to certain elements as the user scrolls down the page. For instance: When the offset is 0: the div will have a height of 100px. When the offset is between 0 and 100: th ...

Refresh page content seamlessly [Bootstrap 5]

Currently delving into Bootstrap 5, I recently discovered that it is possible to switch the content within a div using navs. My goal now is to alter the content from div1 to div2 when clicking on a card, but I want to achieve this using only Bootstrap clas ...

Incorporate CSS styling within a PHP document

Many individuals are aware that HTML can be embedded within a PHP file. However, can CSS also be included in a PHP file and accessed using <link rel="stylesheet" type="text/css" href="mystyle.php" /> to make it act as a CSS file? While it is possib ...

Convert Python strings into HTML JavaScript blocks using Jinja2

Having trouble passing a string to an HTML page in the "<script>" block. I am currently using Python, Flask, and Jinja2. Python code: def foo(): return myString #"[{title: 'Treino 7-Corrida',start: '2015-12-08',color: '#d ...

Guide on altering the background color of dynamically generated textboxes in R Shiny

textInput(paste0("inp1-", wid),label = NULL,value = record$Current_week) This code was used to dynamically generate text input boxes, where the id for each box is determined by a number called wid. I attempted to change the background color using the fol ...

The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section ...

CSS uses color parameters in the same way

Apologies, I spent a few years immersed in the world of IT. Now, onto my query: I have a lengthy ".css" file with numerous structures like color: #567567; within it. Is there a way to utilize a construction similar to color: $mycolor or is this not po ...

Is there a way to smoothly incorporate a new animation into a page, while ensuring that existing elements adjust to make room for it?

I am looking to smoothly fade and move a hidden element (display:none) within the page, shifting other elements to animate into their new positions as necessary. When I reveal the hidden element by changing it to "display:initial," it should seamlessly a ...

How to output a string in jQuery if it includes a certain character?

I need to extract all strings that include a specific word within them, like this: <div> <div> <span> <h3>In Paris (Mark Bartels) worked for about 50 years.</h3> </span> </div> ...

I am encountering some problems with the Drop Down navigation feature on my Bootstrap website. Does anyone know how to properly center the drop down menu?

Hey there! So, I've been trying to fix the wonky drop-down menu on my website, but everything I've attempted so far hasn't worked. I've tinkered with float, margin, and a bunch of other CSS techniques, but no luck. Someone suggested usi ...