Create a CSS Diagonal Ribbon Banner
Ribbon banner will display on these browsers and is hidden on unsupported browsers:
( for:
Internet Explorer 9+,
Firefox 3.5+,
Safari 3.1+,
Opera 10.5+,
Chrome 4.0+,
iosSafari 3.2+
)
1.
2.
4.
Copy your banner code below.
Font, colors, and shadow may be edited, but dimensions must remain as calculated for proper appearance.
5.
Use CSS to position your banner over your page element.
The stylesheet may be placed once in your page
and all ribbon banners that appear in the page will share the same styles.
If you require different styles on the same page, you will need to rename the classes for each design change.
The ribbon is designed to sit invisibly above your element in the clipped portion of the holder.
The ribbon will rotate down into place when a browser supports the transform feature.
Design Option 1: Overlay the banner
Using "position:absolute", the "ribbon_holder" container should be placed 6px above and 6px to the left of your element. We'll use an image as an example element and will place that image in its own container that will also hold the banner.
Design Option 2: Insert a background image
An image can be used as the background to the "ribbon_holder" container and should be offset 6px from the top and left of the container. You will probably need to change the width and height of the "ribbon_holder" to match your background photo. The "ribbon_holder" container itself can then be positioned or floated, with some external margins.
Design Option 1: Overlay the banner
Using "position:absolute", the "ribbon_holder" container should be placed 6px above and 6px to the left of your element. We'll use an image as an example element and will place that image in its own container that will also hold the banner.
<div class="photo_holder" style="position:relative">
<img src="">
<div class="ribbon_holder" style="position:absolute; left:-6px; top:-6px;">
<div class="ribbon_wraps" >
<div class="ribbon_wrapLt"></div>
<div class="ribbon_wrapRt"></div>
<div class="ribbon_banner">
ON SALE NOW!
</div>
</div>
</div>
</div>
Design Option 2: Insert a background image
An image can be used as the background to the "ribbon_holder" container and should be offset 6px from the top and left of the container. You will probably need to change the width and height of the "ribbon_holder" to match your background photo. The "ribbon_holder" container itself can then be positioned or floated, with some external margins.
<div class="ribbon_holder" style="width:406px; height:406px;
background:transparent url() 6px 6px no-repeat; ">
<div class="ribbon_wraps" >
<div class="ribbon_wrapLt"></div>
<div class="ribbon_wrapRt"></div>
<div class="ribbon_banner">
ON SALE NOW!
</div>
</div>
</div>