I am trying to create an angled cornered ribbon over images. As shown in the below screenshot I want to display "Sold" ribbon over the items that are sold

[![enter image description here](https://i.stack.imgur.com/EgZax.png)](https://i.stack.imgur.com/EgZax.png)

Below is the link to the codepen where I have displayed the items using bootstrap 4. So far I am able to display the SOLD ribbon but somehow it appears at the top of the screen instead of the images/items. It would be great help if someone guide me to display the SOLD ribbon over the items that are sold. For you knowledge, I have very little experience in CSS.

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

Here is the sample code that I have created for displaying the ribbon:

```css
/* 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;
}
```