CSS DIV Arrow Comment Box

Add a simple arrow comment box using css and an "arrow" image and sub texts right beneath it. It's a nice interface to use for your blog's comment boxes, for example. The arrow image is being used as a background image, meaning you can control how much of it is shown by adjusting it's horizontal and vertical positions.

/ demo / - / download /



CSS Code

.commentbox{
background-color: #ececec;
width: 450px;
padding: 10px;
}

.commentfooter{
background: url(media/arrow.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
padding-left: 58px;
padding-top: 1px;
margin-bottom: 2em;
font-size: 90%;
color: #4A4A4A;
}

HTML Code

<div class="commentbox">
This is some comment.<br />This is some comment.<br />This is some comment.
</div>
<div class="commentfooter">Posted by Author on 05/10, 03:39 AM</div>