定位 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;
   }

- 422

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/

根据您的喜好调整定位/边距/填充，使其完美。我最近在这个问题上提了一个问题。您可以在这里查看...

如何使用纯CSS创建“工具提示尾巴”？

...这应该非常有用。

希望这有所帮助。
Hristo

- Hristo

---

你在Safari中是否成功地渲染了它？ - 422

@422... 我从未在Safari中测试过它，现在也无法测试。我今天稍后可以尝试并回复您。您遇到了什么问题？也许您可以上传一张截图……？ - Hristo

我无法上传截图，因为我使用的是Windows系统，没有Safari浏览器。我在iPad上测试过了。但效果就像将角度从135度改变为45度。 - 422

啊，这是因为你只有针对Mozilla的CSS...看看我的更新。 - Hristo

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/

- Tumharyyaaden

---

似乎在火狐浏览器中 margin-left: -10px; 的效果更好，我会去确认一下。看起来很不错，谢谢。 - 422

我将数值减少了1，因为在我的FF浏览器中，它没有正确显示顶部边框，左侧出现了一个像素的间隙。我正在使用FF 5.0版本，将其减少9个像素似乎解决了这个问题。另外，如果这个解决方案有效，请考虑接受它作为答案，以便其他人知道... - Tumharyyaaden

只是在Safari上进行测试，但它没有正确地呈现方向。就像一个倒着的L。 - 422

我假设你只需要FF，因为原始文件只有-moz... 无论如何，这里是所有的... -webkit-transform: rotate(135度);
-moz-transform: rotate(135度);
transform: rotate(135度);
-webkit-transform: rotate(135度);
-o-transform: rotate(135度); - Tumharyyaaden

Answer 3

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

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

这样应该可以实现你想要的效果。

- Mitch Dempsey