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;
}