Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: DIVs and containers: Here

Arrow Comment Box

Author: Dynamic Drive

Using a simple "arrow" image, this CSS code transforms a regular DIV into a fancy box with sub text appearing beneath it. It's a nice interface to use for your blog's comment boxes, for example.

This is some comment.
This is some comment.
This is some comment.
Posted by Dynamic Drive on 05/10, 03:39 AM

The arrow image is being used as a background image, meaning you can in fact easily control how much of it is shown just by altering the background image's horizontal and vertical positions:

This is some comment.
This is some comment.
This is some comment.
Posted by Dynamic Drive on 05/10, 03:39 AM

The single image used:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/10/2006

Revision History: None

Usage Terms: Click here

Your Comments (59)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 6 pages  1 2 3 >  Last »

Thanks for this. I like it.
Posted by Slob Jones on 05/10, 07:36 PM
very nice =)
Posted by Laura on 05/11, 02:15 AM
This is kewl, one thing thop... the tip of the arrow doesnt show??
Posted by Abs on 05/11, 03:58 AM
Abs, perhaps you've got the proportions set in a way so that the image height exceeds the height of the cell? Or perhaps insufficient padding? Just a thought.
Posted by pseudoprometheus on 05/11, 09:35 AM
That was that what i searched a long time :P Thank you for sharing :P
Posted by Janek on 05/15, 08:44 AM
Very helpful, thanks!
Posted by gsyi on 05/15, 08:54 AM
Nice css.. I wonder if you can make that without images...
Posted by Ben on 05/19, 02:12 PM
You can make it without images, yes, but it is more complicated which would probably not work in all browsers which is the most important thing in web design.
Posted by Dren T. Martin on 05/19, 07:31 PM
Cool css ! Thank you
Posted by igor on 05/22, 10:25 AM
can anyone help me with the comments them selves? i want those more!!
Posted by Pot Monkey on 05/24, 11:16 AM

Comment Pages 1 of 6 pages  1 2 3 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.