位置 div 箭头答案

【问题标题】：Position div arrow位置 div 箭头
【发布时间】：2011-08-04 00:25:49
【问题描述】：

我有这个代码。

我想要做的是，将箭头放在左侧，例如从左上角向下 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;
   }

【问题讨论】：

标签： css

【解决方案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?

...它应该非常有用。

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

【讨论】：

你有没有让它在 Safari 中正确呈现？
@422... 我从来没有在 Safari 中测试过，现在也不能。我可以在今天晚些时候试一试，然后回复你。你有什么问题？也许您可以上传屏幕截图...？
我无法上传屏幕截图，因为我在 Windows 上，并且没有 safari。我在 iPad 上测试过。但是效果就像把角度从135度改成45度
啊。原因是你只有 Mozilla 的 CSS ......看看我的更新

【解决方案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/

【讨论】：

似乎margin-left:-10px;在 FF 中效果更好，会检查出来。看起来很棒，谢谢
我减少了一个，因为对我来说，在 FF 中它没有得到右上边框，由于某种原因留下了一个像素间隙。我正在使用 FF 5.0 并将其设置为 -9 似乎可以解决问题。另外，如果这解决了问题，请考虑将接受作为答案，以便其他人知道...
只是在 safari 上测试，并没有正确呈现方向。它就像一个向后的L
我以为你只想要FF，因为原来只有-moz...无论如何，这里都是... -webkit-transform: rotate(135deg); -moz 变换：旋转（135 度）；变换：旋转（135度）； -webkit 变换：旋转（135 度）； -o-transform: 旋转(135deg);

【解决方案3】：

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

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

这应该做你想做的事

【讨论】：