pure css arrow help - css

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 bottom fff so it sits comfortably on our container div
The issue I have is I can make a solid color pointer, but not sure if I can make what I want, so thought I would ask here please.
The css for the pointer is:
div.comment-reply .arrow{
border-bottom: 8px solid #888;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
height: 0;
left: 30px;
line-height: 0;
position: absolute;
top: -8px;
width: 0;
}

Answer 1

#422; you can do with css like this rotate property.
css
#C{
height:200px;
width:200px;
background:red;
border:1px solid #000;
position:relative;
}
.arrow{
height: 20px;
width: 20px;
margin-left:30px;
margin-top:-11px;
background:red;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-right:1px solid #000;
border-bottom:1px solid #000;
position:absolute;
bottom:-10px;
left:20px;
}
html
<div id="C"><span class="arrow"></span></div>
you can use :after, :before instead of span.
for IE you can use ie filter
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
CHECK THIS http://jsfiddle.net/sandeep/Hec3t/7/

Answer 2

Using some :before and :after magic, I was able to create this with the following code:
<div class="comment">
<div>
<p>Here is a comment</p>
</div>
</div>
__
.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/