Question

I have this code.

http://jsfiddle.net/ozzy/YGhkW/

What I want to do is, to put the arrow on the left hand side, say 20px down from top left corner.
Buggered trying to position it correctly.

The css:

.arrow {
-moz-transform: rotate(225deg);
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
float: left;
height: 18px;
margin-left: 40px;
margin-top: -9px;
width: 17px;
}
.comment-reply {
width:500px;
height:200px;
border:1px solid #aaaaaa;
border-radius:3px 3px 3px 3px;
}
    .container {
    margin-top:100px;
    margin-left:100px;
   }

Answer 1

UPDATE

You have only provided CSS transform for Mozilla. To make it cross-browser compatible, you need to do something like this…

-moz-transform: rotate(135deg); /* FF3.5+ */
-o-transform: rotate(135deg);  /* Opera 10.5 */
-webkit-transform: rotate(135deg);  /* Saf3.1+, Chrome */
-ms-transform: rotate(135deg); /* IE9 */
transform: rotate(135deg);

/* IE6–IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865475, M12=-0.7071067811865476, M21=0.7071067811865476, M22=-0.7071067811865475, sizingMethod='auto expand');
zoom: 1;

Here’s a really good CSS3 reference with which you can interact and create your CSS3 properties…

http://css3please.com/

---

How about something like this…

http://jsfiddle.net/MZXCj/8/

Adjust the positioning/margins/paddings as you like to make it perfect. I recently asked a question on this very topic. You can check it out here…

How can I create a "tooltip tail" using pure CSS?

… it should be very informative.

I hope this helps.
Hristo