How to Create a Folded Back Banner Using CSS
Web designers often use folded-back ribbon banners as a decorative effect for their text headings. These ribbon banners stick out from the edge of the page and make heading text much more visible to readers. You can create these banners without any images, and modern browsers will support them, including Internet Explorer 9 and up. The code involves two pseudo-elements: elements not part of the actual HTML but created by CSS, and some border tricks to create the triangles for the ribbon's shadows and notches that appear on each edge of the ribbon.
Other People Are Reading
Instructions
-
-
1
Open your Web page in an editor – Notepad will do – and add a heading using HTML heading tags:
<h2 class=”ribbon”>Heading Text</h2>
Give the heading tags a class name like “ribbon” so you can write code to turn any heading into a ribbon. You will target the class name in your CSS code later.
-
2
Open the style sheet for your Web page in the editor. If you do not have one yet, create a blank file and save it as a CSS file to the same folder as your Web page. Add this code after the “<title>” tags in the Web page:
<link rel=”stylesheet” href=”yourstylesheet.css” type=”text/css” />
When you open the style sheet, write new style code after any other code that is already present.
-
-
3
Give your heading a relative position, width and background color. Style text however you like as in the following example:
.ribbon {
position: relative;
width: 300px;
background-color: #a91313;
color: #ffffff;
font-family: Arial, sans-serif;
padding: 10px 20px;
box-shadow: 0px 2px 5px rbgba(0,0,0,0.3);
}This example creates a heading bar that is relatively positioned with a width of 300 pixels, a dark-red background color, white text and a semi-transparent drop-shadow. The padding – 10 pixels top and bottom and 20 pixels left and right – adds space around the text within the bar.
-
4
Create a pseudo-element using “:after” in CSS:
h2:after {
content: ' ';
}By using “:after” in a style rule and adding an empty space for content, as shown, you are creating an element that the browser sees -- yet it is not in the HTML code itself.
-
5
Give absolute positioning to the pseudo-element and set its position to 100 percent from the top and 0 pixels from the left. Make the width and height equal to 0 pixels and set a negative z-index value:
h2:after {
content: ' ';
position: absolute;
top: 100%;
left: 0px;
width: 0px;
height: 0px;
z-index: -10;
}This pseudo-element creates the part of the ribbon that folds back, so it needs a negative z-index to place it behind the heading. Doing this, you can layer the heading's drop-shadow over the pseudo-element, which looks more natural.
-
6
Create the triangle shape for the folded-back section of the ribbon. The trick to creating a triangle in CSS is to use border width on an element. You can think of borders on a zero-dimension element as being four triangles that all point inward. Here is the code for the triangle that creates the folded-back section:
border-width: 5px 10px;
border-style: solid;
border-color: #780d0d #780d0d transparent transparent;Place this code after the z-index you set, within the curly braces of the pseudo-element. It uses two borders – top and left – to create a triangle.
-
7
Write another style rule that creates a second pseudo-element before the heading tag:
h2:before {
content: ' ';
}This pseudo-element will create the notched section of the ribbon.
-
8
Give the notched section of ribbon an absolute position, and make its z-index value lower than the folded-back section. Use a width of 30 pixels and a height of 0 pixels. Push the pseudo-element back 30 pixels to the right by setting a “left” value of -30 pixels. Offset this section of the ribbon from the top using the “top” property:
h2:before {
content: ' ';
position: absolute;
width: 30px;
height: 0;
top: 12px
left: -30px;
z-index: -20;
} -
9
Create the notch by adding borders to three sides of the “:before” pseudo-element. Here is the code, which you should put below the z-index:
border-width: 20px 10px;
border-style: solid;
border-color: #a91313 #a91313 #a91313 transparent;
-
1
Tips & Warnings
This code will not create a ribbon effect in older browsers that do not support pseudo-elements. Internet Explorer provides partial support for version 8 and full support in version 9, but versions 6 and 7 do not support this effect.
