Creating a Banner Wrap Effect with CSS

Do you find yourself always using images for fun design aspects of your website, such as banner wraps or ribbon effects? Well look no further, this tutorial will show you how to complete a banner wrap using only CSS!
Within this tutorial I will be using the :before and :after pseudo classes to create these effects, since :before and :after are compatible down to IE8. If compatibility is an issue, you can replace the :before and :after classes with span’s or div’s before or after the div containing the banner wrap.

Banner Wrap with Round Corners
1) The first step is to create your div in your HTML. I have also created a parent wrapping div in order to place the banner wrap and truly give the wrapping effect.

CSS Border Wrap with Rounded Corners

2) The Next step is to begin your styling of your body and wrapper div.
body {
background-color: #eeeeee;
}

.wrap {
position: relative;
width: 960px;
height: 180px;
margin: 0 auto;
background-color: #ffffff;
}

3) Now we begin the styling of the physical banner. The banner wrap will work best if the position is set to either absolute or fixed.

.wrap > .rounded {
position: absolute;
right: -10px;
top: 10px;
width: 300px;
border-top-right-radius: 10px;
background-color: #F15A24;
color: #ffffff;
}

4) Once the main div is set to and styled, you can begin adding the wrap effect. In order to use the :before, you must use CSS content or else it will not display. Set the height and width to the same value to create a square and then set the div to position: absolute, with the bottom being the negative value of the height.

.wrap > .rounded:before {
content: “”;
position: absolute;
bottom: -10px;
right: 0;
width: 10px;
height: 10px;
background-color: #F15A24;
}

5) Now that the :before class is set, it’s time to complete the final aspect of the rounded banner wrap effect, using the :after pseudo class. Much like the :before pseudo class, you must have CSS Content in order for the after class to work. With the after class, instead of creating a square, you’ll want to create of a rectangle (width the same as the :before), setting the position to absolute to and the bottom to the negative value of the height. Finally, you’ll want to add the border radius. You’ll only need to add a radius to the top right and bottom right to create a one-sided rounded effect. In order to get a real half circle effect, the border-radius should be equal to half the height.

.wrap > .rounded:after {
content: “”;
position: absolute;
bottom: -20px;
right: 0;
width: 10px;
height: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #b54921;
}

6) Although this is one way to complete this effect, it is not the only way. You can use divs instead of pseudo classes, especially if you’d like to have the wrap on both sides of the div. Some issues you may run into, are of course IE issues, with the biggest one being that IE8 cannot render border-radius (more on the below), as well, IE9 cannot render gradients with border-radius, so you may have to drop the filter on the gradient and use a solid background-color.

Banner Wrap without Border Radius
As stated above, IE8 cannot render a banner wrap with border-radius; in fact it can’t render border-radius at all. So the best solution is to create a banner wrap without using border-radius.

1) Create HTML.

CSS Border Wrap Without Round Corners

2) The next step is to again style the body and your wrapping div. Use styles from above.

3) Now we style the banner div. Again set the div to position absolute or fixed. In this example I’ve made the banner wider than .wrap in order to put the banner wrap on both sides of the div.

.wrap > .angled {
position: absolute;
left: -10px;
top: 90px;
width: 980px;
background-color: #0A76BD;
color: #ffffff;;
}

4) We then style the :before and :after classes, since some attributes contain the same styles. In this case, to create the angle, we will be using the border attribute. Set only one of the border-colors to a color, with the rest to transparent.
.wrap > .angled:before, .wrap > .angled:after{
content: “”;
position: absolute;
display: block;
border-style: solid;
border-color: #0a3159 transparent transparent transparent;
bottom: -10px;
}

5) Finally, we style and place the :before and :after classes. One on the left and one on the right. Setting to top and left/right widths of the border to create a triangle, this will give a back angled effect, creating the banner wrap.
.wrap > .angled:before {
left: 0;
border-width: 10px 0 0 10px;
}

.wrap > .angled:after {
right: 0;
border-width: 10px 10px 0 0;
}

6) Again, there is more than one way to create this effect, especially since :before and :after classes don’t work below IE8. To solve the IE7 issue, using div’s or span’s to replace the :before and :after, would be the best solution.

I hope you enjoyed learning about Banner wrapping with CSS. Although it may be easier to use an image, there are benefits to using CSS, with the biggest being responsive design. You no longer need to worry if the image will display properly on mobile, or if the content exceeds the set height (will often break pattern created in image). Using CSS can make your designs more dynamic to content and the fast growing web as we know it today.

 

– Anthony DeGasparis, Web Developer