开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜