CSS3 Corner Ribbon on Featured Image

Hello

I have found many pieces of code on the internet to try and create a corner ribbon on the featured image. I want to use the corner ribbon to advertise a “price” for my product. Like this maybe ?

http://jsfiddle.net/H6rQ6/9448/

My site is setup for products and for blogging using categories. So i don’t want to do this sitewide. I only want to add a corner ribbon to all featured images in a few categories. (Other categories are not products but blog posts)

My question is.. Can I just type in some line of code to the post text box and it will make a ribbon over the featured image for just that one post (or how many I want to do that to).

I understand there needs to be code in the style.css or functions maybe, i’m not sure..

Any help is always appreciated.

Thank you so much.

Thank you Emil!

I dropped the following code into the post:

<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">$85.99</div></div>
</div>

I also only used this part of the code:

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: 52px;
  right: -2px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

It seems to work. I adjusted the position slightly.

The problem that I have, is that some of the featured images seems to be different sizes? Thus the ribbon seems off on some pics.

Also how can this also be put on the thumbnails?

Thank you

• This reply was modified 11 years by mboydnv.