pure css arrow help

Question

The image below describes the issue. I am creating our comment forms. And want to create the pointer arrow in ffffff background color, and a border of 1px aaaaaa and border

Answer 1

Using some :before and :after magic, I was able to create this with the following code:

    

        
Here is a comment
    

__

.comment div:before {
    content:"";
    border:10px solid transparent;
    border-bottom-color:#ccc;
    width:0px;
    height:0px;
    display:block;  
    position:absolute;
    top:-10px;
    left:21px;
}
.comment div:after {
    content:"";
    border:12px solid transparent;
    border-bottom-color:#fff;
    width:0px;
    height:0px;
    display:block;  
    position:absolute;
    top:-10px;
    left:19px;
}
.comment {
    position:relative;
    margin:10px;   
    padding:10px;
}
.comment div {
    padding:1em;
    border:1px solid #ccc;   
}

It's not perfect, but it avoids the need for an empty tag to contain your arrow.

Demo: http://jsfiddle.net/yGsKd/2/