Position div arrow

Question

I have this code.

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: 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;
   }

score 3 · Accepted Answer · edited May 23 '17 at 11:47

3

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

edited May 23 '17 at 11:47

Community

1
1

answered Aug 02 '11 at 20:45

Hristo

45,559
65
163
230

did you ever get it to render properly in Safari ? – 422 Aug 02 '11 at 21:44
@422... I've never tested it in Safari and can't right now. I can try it out later today and get back to you. What issues are you having? Maybe you can upload a screenshot...? – Hristo Aug 02 '11 at 22:13
I cannot upload screenshot, as I am on windows, and dont have safari. I tested on iPad. But the effect is like changing the angle from 135 deg to 45 deg – 422 Aug 02 '11 at 22:16
ah. the reason for that is because you only have CSS for mozilla... check out my update – Hristo Aug 02 '11 at 22:34

Tumharyyaaden · Answer 2 · 2011-08-03T16:25:49.227

3

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/

edited Aug 03 '11 at 16:25

answered Aug 02 '11 at 20:47

Tumharyyaaden

2,733
3
19
20

seems margin-left:-10px; works better in FF, will check them out . Looks great thanks – 422 Aug 02 '11 at 20:57
I decreased one because for me in FF it did not get the top border right, left one pixel gap for some reason. I am using FF 5.0 and making it -9 seemed to fix the issue. Also, consider apply accept as answer if this resolved the issue so that others know... – Tumharyyaaden Aug 02 '11 at 21:03
Just testing on safari, and it isnt rendering orientation correctly. Its like a backward L – 422 Aug 02 '11 at 21:24
1

I assumed you only wanted FF since original only had -moz... anyways, here are all of them... -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); – Tumharyyaaden Aug 03 '11 at 00:48

score 1 · Answer 3 · answered Aug 02 '11 at 20:40

1

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

answered Aug 02 '11 at 20:40

Mitch Dempsey

38,725
6
68
74

Position div arrow

3 Answers3

UPDATE