This post has been updated
This article was written back in 2010, when my knowledge of CSS was still rather limited. I've now updated the technique here to use much more semantic code. While the article below is still good if you're after a laugh, I recommend you read the new article if you plan on using the ribbon yourself.
Infobox with Pure CSS 3D Ribbon
Add some style to your site with this pure CSS3 infobox, featuring a 3D ribbon header. Oh, and did we say there’s no images!
Pure CSS Infobox
This is the content of the infobox. It is made with pure CSS - no images. Of course, you can change the colour of the background and header to match your site's theme.
Pretty cool, huh?
Infoboxes are a great way of displaying important information to visitors of your site - and they work even better when they’re easy on the eye. So today we’re brining you an infobox with a twist - it has a ribbon-style header that adds a touch of 3D class to your site. Plus, for the anti-photoshoppers out there, it’s made with pure CSS - which means you don’t need to worry about fiddling around with images or increasing the page loading time.
So how are we going to achieve this?, I hear you ask. Well, as you may or may not know, when browsers render a border, they are created as angles. If you increase the width of the border, that angle becomes a triangle. And by making all but one of the border sides transparent, you end up with a triangle on a transparent background. If you’d like to read more on this, there’s a great explanation here.
Now, back to the infobox. The image below shows the different components that will make up this box and header.

Page Source
While it can look a bit like div soup, it’s important to have a container for the infobox, as it will also allow you to position it around the page without having to reconfigure the location of the triangles. You need to have a separate div for each triangle - one will be on the left, and one on the right. And instead of a separate class for the header, I prefer to just use the h3 of the infobox class.
CSS
We’ll start off by resetting the container, and setting up the infobox and it’s header. I chose 250px wide, but you can make it as wide as you like - you’ll just need to adjust the location of the triangles to suit.
.infobox-container { position: relative; display: inline-block; margin: 0; padding: 0; width: auto; } .infobox { width: 250px; background: #424242; padding: 10px 5px 5px 5px; margin:10px; color: #fff; font-size: 90%; } .infobox h3 { background: #3198dd; width: 270px; color: #fff; padding: 10px 5px; margin: 0; font-size: 160%; text-align: center; font-weight: bold; }

Next we’ll centre the header by setting it’s position to relative and moving it left 15px.
.infobox h3 { position: relative; left: -15px; }

Now for the cool part - setting up the triangles. The height and width is set to 0, the border-width to 13px and the border-color sets all but one side transparent. You also need to position them absolutely to prevent a big gap at the top of the infobox.
.infobox-container .triangle-l { border-color: transparent #2083c2 transparent transparent; border-style:solid; border-width:13px; height:0; width:0; } .infobox-container .triangle-r { border-color: transparent transparent transparent #2083c2; border-style:solid; border-width:13px; height:0; width:0; }

You can see both of the triangles at the top left of the container. Setting the position to absolute and a bit of trial and error with the top and left declarations and you can position them under the header where they should be.
.infobox-container .triangle-l { position: absolute; left: -12px; top: 45px; } .infobox-container .triangle-r { position: absolute; left: 266px; top: 45px; }

However, we want the triangles to display beneath the infobox, so we’ll employ the z-index to set the appropriate layering. It’s important for the position to be either relative or absolute, otherwise the z-index won’t work.
.infobox { position: relative; z-index: 90; } .infobox h3 { position: relative; z-index: 100; } .infobox-container .triangle-l { z-index: 0; /* displayed under the infobox */ } .infobox-container .triangle-r { z-index: 0; /* displayed under the infobox */ }

That’s the basics of the infobox, but we won’t stop there. We’ll jazz it up a bit with some gradients, border radius and box shadows to enhance the 3D effect. We’ll also add a text shadow to the text in the ribbon.
.infobox { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); box-shadow: 0px 0px 3px rgba(0,0,0,0.55); background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242)); background-image: -moz-linear-gradient(top,#6a6a6a,#424242); } .infobox h3 { -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); box-shadow: 0px 0px 3px rgba(0,0,0,0.55); background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd)); background-image: -moz-linear-gradient(top,#33acfc,#3198dd); text-shadow: #2187c8 0 -1px 1px; }
As pointed out by alert reader leiger, the infobox will inherit the formatting for links from the site's theme, which may clash with the dark background of the box. To overcome this, you just need to define some appropriate values to the link selector. If you change the background of the infobox, you may also need to change these declarations as well.
.infobox a { color: #35b0ff; text-decoration: none; border-bottom: 1px dotted transparent; } .infobox a:hover, .infobox a:focus { text-decoration: none; border-bottom: 1px dotted #35b0ff; }
And here it is - a lovely infobox that will be sure to catch the attention of your site visitors.
Pure CSS Infobox
This is the content of the infobox. It is made with pure CSS - no images. Of course, you can change the colour of the background and header to match your site's theme.
Pretty cool, huh?
This is a link
You can also use the above technique to wrap a ribbon around the outside of the page container, like I have done on the Theme Changes page. You'll just need to assign an appropriate z-index to the #container, #content-wrap, #main-content or #page-content, depending on your site's theme.
This blog entry was inspired by an article at pvmgarage.com.
This post has been updated
This article was written back in 2010, when my knowledge of CSS was still rather limited. I've updated the article here to use much more semantic code. You should check it out.
This post has been updated
This article was written back in 2010, when my knowledge of CSS was still rather limited. I've now updated the technique here to use much more semantic code. While the article below is still good if you're after a laugh, I recommend you read the new article if you plan on using the ribbon yourself.
Enjoy the article? Tweet it!
Discussion - No comments yet…29 comments
Amazing! You make really beautiful diagrams too!
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
Oh, wow *stares at the page with mouth hanging open for so long he starts drooling*
And I could entertain myself for hours with your "About this site" box now that it has a + turning into an X. Like they say, small things amuse small minds ;-)
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)
Thank you both. Let me know if you use it anywhere - I'd love to see one in action.
BMC Creative | RoaringApps | @brycecammo
Suggestion: links look ugly (they inherit their colour from the website theme) - so you may want to add that to the CSS.
Also you may wish to consider making the text justified or centred?
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)
Thanks for pointing that out Shane. I hadn't thought about links - and the colour of them on this site works okay on the dark background anyway. I've added this to the blog post above.
As for aligning the text, I figured that really depends on what the content is. Plus, it will still support inline declarations, such as [[=]] to centre align it.
BMC Creative | RoaringApps | @brycecammo
As always, I am amazed to your site. I have read a tutorial in making pure css speech bubbles by Nicolas Gallagher. It has the same principle as the 3d ribbon in your tutorial but he used :before and :after pseudo class on the triangles.
It would be great to see your own speech bubbles tutorials for Wikidot, though I don't know where it can be implemented perhaps on the comments section ;)
You can see the quote CSS that is being used on this website already. I too would like to see a tutorial for not only this one, but perhaps one or two of those on the website that you linked to.
Thanks for the link by the way, will try them myself later :)
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)
I remember seeing those speech bubbles a while back, and attempting them with no luck. I think my CSS is a bit better now so I'll try them again. I'll let you know how I go.
BMC Creative | RoaringApps | @brycecammo
looks pretty strange in IE7
what's the advantage of doing it this way over using a PNG?
Post preview:
Close preview