css - 位置 div 箭头

Question

我有这个代码。

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

我想做的是，将箭头放在左侧，比方说从左上角向下 20 像素。试图正确定位它时遇到麻烦。

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

更新

您只为 Mozilla 提供了 CSS 转换。为了使其跨浏览器兼容，你需要做这样的事情......

-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;

这是一个非常好的 CSS3 引用，您可以使用它进行交互并创建您的 CSS3 属性...

http://css3please.com/

---

这样的事情怎么样...

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

根据需要调整定位/边距/填充以使其完美。我最近问了一个关于这个话题的问题。你可以在这里查看...

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

...它应该非常有用。

希望对您有所帮助。
赫里斯托