Position div arrow
I have this code.
http://jsfiddle.net/ozzy/YGhkW/
What I want to do is, to put the arrow on the left hand side, say 20px down from top left corner. Buggered trying to position it correctly.
The 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开发者_JAVA百科: 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;
}
UPDATE
You have only provided CSS transform for Mozilla. To make it cross-browser compatible, you need to do something like this...
-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;
Here's a really good CSS3 reference with which you can interact and create your CSS3 properties...
http://css3please.com/
How about something like this...
http://jsfiddle.net/MZXCj/8/
Adjust the positioning/margins/paddings as you like to make it perfect. I recently asked a question on this very topic. You can check it out here...
How can I create a "tooltip tail" using pure CSS?
... it should be very informative.
I hope this helps.
Hristo
Change your three of ".arrow" CSS properties
margin-left:-9px;
margin-top: 40px;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-o-transform: rotate(135deg);
I updated your fiddle... http://jsfiddle.net/YGhkW/7/
http://jsfiddle.net/YGhkW/3/
I set comment-reply
to be position:relative
then I set the arrow
to be position:absolute; left:0; top:20px;
That should do what you want
精彩评论