Purely CSS Callouts

This article explains how you can create callouts using CSS and without using a single image. This will use the CSS thick border technique for creating slant area. Look at the callouts below:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

This callout is created only using CSS. The arrow shown in the callout is basically a DIV with thick up border and transparent left and right border. And its height and width are 0. You only see the border or the DIV which will create the arrow like effect.

Here is the complete CSS and html code of this:

CSS Code

<style type="text/css">    
    .calloutUp
    {
        height: 0;
        width: 0;
        border-bottom: 12px solid #ffffff;
        border-left: 12px dotted transparent;
        border-right: 12px dotted transparent;
        left: 0px;
        top: 0px;
        margin-left: 20px;
        z-index: 10;
    }
    .calloutUp2
    {
        position: relative;
        left: -10px;
        top: 2px;
        height: 0;
        width: 0;
        border-bottom: 10px solid #9999ff;
        border-left: 10px dotted transparent;
        border-right: 10px dotted transparent;
        z-index: 11;
    }
    .calloutDown
    {
        height: 0;
        width: 0;
        border-top: 12px solid #ffffff;
        border-left: 12px dotted transparent;
        border-right: 12px dotted transparent;
        left: 0px;
        top: 0px;
        margin-left: 20px;
        z-index: 11;
    }
    .calloutDown2
    {
        position: relative;
        left: -10px;
        top: -12px;
        height: 0;
        width: 0;
        border-top: 10px solid #9999ff;
        border-left: 10px dotted transparent;
        border-right: 10px dotted transparent;
        z-index: 10;
    }
    .divContainerUp
    {
        background-color: #9999ff;
        border: solid 1px #ffffff;
        position: relative;
        top: -1px;
        z-index: 9;
        width: 500px;
        padding: 4px;
    }
    .divContainerDown
    {
        background-color: #9999ff;
        border: solid 1px #ffffff;
        position: relative;
        top: 1px;
        z-index: 3;
        width: 500px;
        padding: 4px;
    }
    .divContainerMain
    {
        background-color: #ccccff;
        padding: 8px;
    }
</style>

Html Code

<div class="divContainerMain">
    <h3>
        Up Side Callout</h3>
    <div>
        <a href="#">Ramesh Soni</a> Said</div>
    <div class="calloutUp">
        <div class="calloutUp2">
        </div>
    </div>
    <div class="divContainerUp">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt
        turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus.
        Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla
        viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan
        consectetuer.
    </div>
    <br />
    <br />
    <h3>
        Down Side Callout</h3>
    <div class="divContainerDown">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt
        turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus.
        Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla
        viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan
        consectetuer.
    </div>
    <div class="calloutDown">
        <div class="calloutDown2">
        </div>
    </div>
    <div>
        <a href="#">Ramesh Soni</a> Said</div>
</div>

Here is a full example and up side and down side callouts.

Up Side Callout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

Down Side Callout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

28 comment(S)


David on Oct 16, 2008 09:03 AM

Very nice! Definitely something I'm going to remember and use.

EnTuTeque on Oct 16, 2008 01:12 PM

I need the callout arrow to point to the left? What does the CSS look like to accomplish this?

jesusvld on Oct 16, 2008 03:45 PM

Excellent! Esto se puede aplicar a un listado de comentarios ó un blockquote dentro del contenido de un post. Nice!! :)

Jumping Dog Design on Oct 16, 2008 04:05 PM

Very cute solution - thanks for that.

ale on Oct 17, 2008 02:39 AM

DONT WORK ON IE6...
IE7 and FF works Perfect!

Frank Booth on Oct 17, 2008 07:10 AM

Your blog about CSS uses table-based markup?
Mind-bottling.

Vince on Oct 17, 2008 08:39 AM

Doesn't this go against what proper semantic markup and CSS are made for? fight tag soup.

Carissa on Oct 17, 2008 11:52 AM

This does not work in IE 6 because IE 6 does not handle dotted or dashed borders properly.

And I agree with Vince. A technique like this, with two empty divs used purely for presentation is not semantic. I don't know if I'd go so far as to call it tag soup, but in this case, I think using a background image would be the better technique. Just because you can do it with pure CSS doesn't mean you should.

Shannon on Oct 18, 2008 03:04 PM

If it doesn't work in IE6 it doesn't work. I hate IE as much as the next guy but you still have a huge percentage of people who browse on IE6. This method is intrusive and creates an illogical design when viewed in IE6.

sponsored

Kaylee on Jan 15, 2009 03:02 PM

Thank you. This was very helpful.

piotr on Jan 23, 2009 05:35 PM

To have it right aligned add <div align="right"> outside and margin-right: 20px; to calloutUp

neXXus on Jan 28, 2009 04:05 PM

If you replace dotted by dashed, at least the black dots are gone in IE6.
still not perfect, but at least a bit better. I doubt it will be possible to fix all quirks in IE6.

b on Feb 3, 2009 03:34 PM

great work!!!... helped me!!!

bill on Aug 26, 2009 07:39 AM

do away with the page redirect and you should be good

Beben Koben on Oct 20, 2010 04:25 AM

this is full stylish...
thanks for tutor...;)
salam blogger \\m/

Nation on Oct 29, 2010 11:47 PM

really cool! good job!

David on Dec 3, 2010 08:06 PM

This is a cool idea I've been looking for an idea like this for testimonials, great tip

JamesW on Jan 21, 2011 08:20 AM

this doesnt work in ie6 because ie6 doesnt support transparent borders
simply remove the 'pointy' divs for ie6

Sam on Nov 16, 2011 09:15 PM

This doesn't work in IE9. Somehow the IE team screwed the pooch (again).

Sam on Nov 16, 2011 09:19 PM

Addendum: it works if you set the border types all to solid (or maybe it's that they have to be same - more testing required)

axl8713 on Jan 19, 2012 11:49 AM

thanks a lot!

cgvector on Jul 2, 2012 02:34 AM

This doesn't work in IE9

sakthi on Apr 8, 2013 09:07 PM

today i learn new thing. i search it long time. but i learn it today

michael on Jul 3, 2013 07:18 PM

great!

michael on Jul 3, 2013 07:19 PM

nice one!

spandana on Dec 6, 2013 12:19 PM

Really nice and neat. I used this and it worked for me. Thank you for the wonderful post.

Leave a comment