[Solved] Put Arrow On Corner CSS

[CarraraWebsiteSolutions]

Hi I am trying to put my drop down arrow on the corner I can only get it to the edge do not know how to make arrow look like it is on corner.

http://codepen.io/mwbcomputers/pen/jEveu

[Paulie_D]

Which corner?

How should it look?

Do you have an image?

[CarraraWebsiteSolutions]

Like this image here click on link to view image http://s23.postimg.org/xipjzo6hn/sample.png

[Paulie_D]

Well…you’ll have to rotate it first…then change the position values so it sits right.

http://codepen.io/anon/pen/vtAbh

[CarraraWebsiteSolutions]

Thanks. did you add the negative to right and bottom? and i see z-index new?

[Paulie_D]

Yep.

You play with the position numbers to get it located correctly. If you set them back to zero it will just hang outside the box.

The z-index is there to make sure it sits behind the main element. If you don’t do that it will sit in front and possibly hide the
content of the box.

To see what I mean, try removing the x-index property and change the border-top color to red.

The shape of the arrow is determined by the border sizes so you can play with that too. It’s actually very flexible.

Here…see what I mean.: http://codepen.io/anon/pen/rqlmv

[Author]

Posts