我有这个代码。
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;
}
最佳答案
更新
您只为 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 属性...
这样的事情怎么样...
根据需要调整定位/边距/填充以使其完美。我最近问了一个关于这个话题的问题。你可以在这里查看...
How can I create a "tooltip tail" using pure CSS?
...它应该非常有用。
希望对您有所帮助。
赫里斯托
关于css - 位置 div 箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6918267/