Skip to content

Dear Internet Explorer user: Your browser is no longer supported

Please switch to a modern browser such as Microsoft Edge, Mozilla Firefox or Google Chrome to view this website's content.

Create a clickable corner ribbon for your website

Using CSS and simple HTML, easily create a promotional “ribbon” in the corner of your website that will link to another page.

Sometimes the situation may arise when a website owner wants to add a promotional ‘corner ribbon’ or ‘corner banner’ to their website. This may be to promote a special event, a charitable cause or to generate sales during a special campaign.

This tutorial will show you how to make an unobtrusive but eye-catching promotional ribbon for your website that:

Step 1: Create the ribbon

Using a graphic software programme such as Adobe Photoshop, Corel PhotoImpact or Gimp, create a transparent image measuring 170×170 pixels.

Create your ribbon to a design of your choice. The ribbon would normally be tilted at a 45° angle. Your ribbon might look something like this within your graphics package:

The chequered pattern represents the transparent area and the border the edge of the image.

Important: Save your image in PNG format. This preserves the transparency around your ribbon.

Upload your ribbon to your web server via FTP.

Step 2: Create your Style Sheet

Create a new CSS file and add the following code:

#ribbon {
position: fixed;
top: 0;
right: 0;
z-index: 10000;
cursor: pointer;

The class identifier has been named “ribbon” and the z-index value set to 10,000 to (hopefully) ensure that the ribbon displays above all other content on the website.

Save the file as “ribbon.css” and upload to your server via FTP.

Step 3: Reference your style sheet within your <head> tags.

The following piece of HTML should be included within your <head> tags.

<link rel="stylesheet" href="/path/to/ribbon.css" type="text/css" />

Simply change the href value to point to the location of your ribbon.css file. You can use a relative or absolute link.

Step 4: Include the ribbon within your <body> tags.

Include the following code anywhere within the <body> of your HTML file.

<a id="ribbon" href="" target="_blank">
<img alt="Alternative Text" src="/path/to/ribbon.png" width="170 height="170">

The ‘ribbon’ class ID ensures that the ribbon is placed at the top right-hand side of the browser window. You will need to change the URL that the ribbon points to when clicked. You should also change the img alt value to something more meaningful. If you don’t want the hyperlink to open in a new tab/window, delete target="_blank". Finally, check that the code correctly points to your ribbon PNG file from Step 1.

That’s it!

Your page should now display your ribbon in the top right-hand corner. When clicked, the browser should open a new window to a page of your choosing.


You can use a ribbon with different dimensions, but ensure you change the height and width values of the code in Step 4.

PNG Files and Internet Explorer 6

Internet Explorer 6 doesn’t display PNG files correctly (the transparent area will appear grey).

In 2012, I believe that Internet Explorer 6 is not worth concerning oneself with but if the prospect of PNG files displaying incorrectly for the few remaining IE6 users bothers you, simply use the SuperSleight jQuery script.



3 responses to “Create a clickable corner ribbon for your website”

On 24 February 2012, Prodyot wrote: Hyperlink chain icon

Very good tutorial.
Loved reading it.
You have a classy style of presentation.


On 5 September 2012, Charles wrote: Hyperlink chain icon

Very helpful tutorial.

Implemented it into my business application.

Thank you very much


On 6 December 2012, Andres Gomez wrote: Hyperlink chain icon

Great!, look at thanks!!!


Have Your Say

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.