Question

我有这段代码。

我想要做的是，将箭头放在左侧，从左上角向下20px。试图正确定位它是错误的。

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?

......它应该是非常有用的。

我希望这会有所帮助赫里斯托斯

Answer 2

更改三个“.arrow”CSS属性

margin-left:-9px;
margin-top: 40px;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg); 
transform: rotate(135deg); 
-o-transform: rotate(135deg);

我更新了你的小提琴... http://jsfiddle.net/YGhkW/7/

Answer 3

http://jsfiddle.net/YGhkW/3/

我将comment-reply设为position:relative，然后将arrow设为position:absolute; left:0; top:20px;

那应该做你想做的事

定位div箭头

3 个答案:

更新